vue+element-pus实现表格拖拽功能

一、引入插件(sortable.js)

npm install sortable.js --save

二、Sortable使用

import Sortable from 'sortablejs';

三、实例

html部分

 element table务必指定row-key，row-key必须是唯一的，如ID，不然会出现排序不对的情况。

<el-table
     :data="list"
     row-key="id"
>
     <el-table-column prop="lineNo" label="专线号" width="120px" sortable></el-table-column>
     <el-table-column prop="aNe" label="源端网元" width="250px" sortable></el-table-column>
     <el-table-column prop="zNe" label="宿端网元" width="250px" sortable></el-table-column>
</el-table>

js部分

<script>
export default{
    data(){
        return{
        // 拖拽表头数据
          dropCol: [
            {
              label: "专线号",
              prop: "lineNo"
            },
            {
              label:"源端网元",
              prop:"aNe"
            },
            {
              label:"宿端网元",
              prop:"zNe"
            }
          ],
          // 行拖拽
          tableData:[]
        }
    },
    methods:{
        //列拖拽
        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);
            }
          });
        },
        //行拖拽
        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)
            }
          })
        }
    },
    mounted() {
    this.getTableList();
    this.columnDrop();
  },
}
</script>