当前位置 : 主页 > 网络编程 > JavaScript >

关于Element UI table 顺序拖动方式

来源:互联网 收集:自由互联 发布时间:2023-02-08
目录 Element UI table 顺序拖动 基本使用 element关于table拖拽排序问题 Element UI table 顺序拖动 使用Sortable.js插件。对element-ui中的el-table进行拖拽行排序。 new Sortable(example1, { animation: 150, ghos
目录
  • Element UI table 顺序拖动
    • 基本使用
  • element关于table拖拽排序问题

    Element UI table 顺序拖动

    使用Sortable.js插件。对element-ui中的el-table进行拖拽行排序。

    在这里插入图片描述

    new Sortable(example1, {
        animation: 150,
        ghostClass: 'blue-background-class'
    });
    

    官网:

    [1] Sortable.js官网配置项说明等

    [2] Sortable更多使用示例

    基本使用

    1、安装

    npm install sortablejs --save

    2、引用

    import Sortable from 'sortablejs'

    3、使用

        <el-table
          id="table"
          :data="list"
          row-key="id"
          style="width: 500px"
        >
          <el-table-column
            prop="name"
            label="称"
            width="180"
          />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                class="handle"
                size="mini"
              ><i class="el-icon-rank" /> 移动</el-button>
            </template>
          </el-table-column>
        </el-table>
    
    <script>
      // 引用 Sortable
      import Sortable from 'sortablejs'
      export default {
        data() {
          return {
            list: []
          }
        },
        mounted() {
          this.rowDrop();
        },
        methods: {
          //行拖拽,排序方法
          rowDrop() {
          // 获取对象
            const el = document.querySelector('#ability-table .el-table__body-wrapper tbody')
            const self = this
    	  // 配置
    	    var ops = {
              handle: ".handle",
              onEnd({ newIndex, oldIndex }) {
                self.list.splice(newIndex, 0, self.list.splice(oldIndex, 1)[0])
                const newArray = self.list.slice(0)
                newArray.forEach((value, index) => {
                value.orderNum = index + 1 //序号为index+1
                self.$set(newArray, index, value)
    	       
    	        self.list= [] //
    	        self.$nextTick(() => {
    	          self.list= newArray ? newArray : []
    	        })
    		}
            Sortable.create(el,ops)
          },
        }
    </script>
    

    说明:

    orderNum:为排序号

    handle: 使列表单元中符合选择器的元素成为拖动的手柄,只有按住拖动手柄才能使列表单元进行拖动

    Array.splice() 方法有三个参数:

    • index :规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
    • howmany:要删除的项目数量。如果设置为 0,则不会删除项目。
    • item1, ..., itemX :向数组添加的新项目。

    注意:

    • newArray = Array.splice(0): 表示将原数组赋给新数组,并将原数组清空。
    • 要在el-table渲染后调用 this.rowDrop(); 方法
    • 组件绑定是根据Id绑定的:document.querySelector('#ability-table .el-table__body-wrapper tbody'),要注意父组件Id和子组件Id不要重名,否则会优先绑定到父组件对应的Id元素。

    element关于table拖拽排序问题

    最近在使用element table的时候,经常会遇到排序的问题,如果只是简单的排序的话,element官方已经给出了指定的方法

    //table的默认排序方式是按ID排序 顺序为递减 这里可以改成其它 比如 order
        <el-table :data="tableData" :default-sort="{prop: 'ID', order: 'descending'}">
          //设置sortable属性时出现排序按钮
          <el-table-column prop="ID" label="座号" sortable>
        </el-table>

    但是,element官方组件并不支持拖拽排序,我在这里引入sortablejs实现拖拽排序的功能

    sortablejs GitHub地址

    //sortablejs     GitHub地址
    https://github.com/SortableJS/Sortable#readme
    //安装sortable.js
    Install with NPM:
    $ npm install sortablejs --save
    //在组件内引入
    import Sortable from 'sortablejs'
    //为需要拖拽排序的表格添加ref属性
    <el-table  ref="dragTable">
    //在数据渲染完毕添加拖拽事件
    created(){
       this.getBanner()
    },
    methods:{
        async getBanner(val){
              await apiGetBanner().then((res)=>{
                   this.bannerTable = res.data.data;
              })
             this.oldList = this.bannerTable.map(v => v.id);
             this.newList = this.oldList.slice();
             this.$nextTick(() => {
                 this.setSort()  //数据渲染完毕执行方法
             })
        }
        setSort() {
            const el = this.$refs.dragTable.$el.querySelectorAll(
                    '.el-table__body-wrapper > table > tbody'
            )[0];
            this.sortable = Sortable.create(el, {
                // Class name for the drop placeholder,
                    ghostClass: 'sortable-ghost', 
                    setData: function(dataTransfer) {
                    dataTransfer.setData('Text', '')
                },
               //拖拽结束执行,evt执向拖拽的参数
               onEnd: evt => {
                  //判断是否重新排序
                  if(evt.oldIndex !== evt.newIndex){
                      let data = {
                         id:this.bannerTable[evt.oldIndex].id,
                         banner_order:evt.newIndex
                      }
                      //数据提交失败则恢复旧的排序
                      apiPutBanner(data).catch(()=>{
                         const targetRow = this.bannerTable.splice(evt.oldIndex, 1)[0];
                         this.bannerTable.splice(evt.newIndex, 0, targetRow);
                      })
                  }
                }
            })
        }
    }

    如果需要列拖拽的话,可以参考下面的代码,和上面是一样的原理,在这里我就不赘述了

    //行拖拽
        rowDrop() {
          const tbody = document.querySelector('.el-table__body-wrapper tbody')
          const _this = this
          Sortable.create(tbody, {
            onEnd({ newIndex, oldIndex }) {
              const currRow = _this.tableData.splice(oldIndex, 1)[0]
              _this.tableData.splice(newIndex, 0, currRow)
            }
          })
        },
        //列拖拽
        columnDrop() {
          const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
          this.sortable = Sortable.create(wrapperTr, {
            animation: 180,
            delay: 0,
            onEnd: evt => {
              const oldItem = this.dropCol[evt.oldIndex]
              this.dropCol.splice(evt.oldIndex, 1)
              this.dropCol.splice(evt.newIndex, 0, oldItem)
            }
          })
        }

    以上为个人经验,希望能给大家一个参考,也希望大家多多支持易盾网络。

    上一篇:node版本快速切换及管理方法
    下一篇:没有了
    网友评论