vue+elementUI+sortableJS实现表格列拖拽，一开始可以，但加上slot-scope后失效了（有demo）

发布于 2022-09-11 16:53:28 字数 3630 浏览 21 评论 0

问题描述

使用vue + elementUI + sortableJS 实现el-table表格的列拖拽功能，发现列拖拽实现了，但表格行数据不会更新

问题出现的环境背景及自己尝试过哪些方法

公司使用的vue + elementUI，最近有个需求，需要在el-table组件中，实现表格列的拖动。
通过网络搜索后，发现可以用SortableJS加回调处理来实现，看网上的例子也是可以的，于是自己搞下来弄。
一开始也是可以的，列拖拽后行数据也会相应发生变化，但在使用了slot-scope="scope"后，列数据不再更新了，一开始以为是columnKey没设置，后来设置了没用，再后来以为是数据没更新，给列配置项加了watch，发现数据是有发生变化的，但是行数据就是不改变。

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
html部分

<div id="app">
  <template>
    <p>table 1 (drag column and row data changed)</p>
    <el-table border class="tb1" :data="tableData" size="mini" >
      <el-table-column
        v-for="(item, index) in elTheadList"
        :prop="dataTheadList[index]"
        :label='item'
        :key="`thead_${index}`"
       >
      </el-table-column>
    </el-table>
    <p>table 2 (drag column but row data not changed)</p>
    <el-table border class="tb2" :data="tableData2" size="mini" >
      <el-table-column
        v-for="(item, index) in elTheadList2"
        :prop="dataTheadList2[index]"
        :label='item'
        :key="`thead_${index}`"
       >
         <template slot-scope="scope">
           <template v-if="item == 'type'">
             {{scope.row.type | typeFilter}}
           </template>
          <templete v-else>
            {{scope.row[item]}}
          </templete>
        </template>
      </el-table-column>
    </el-table>
  </template>
</div>

代码部分

var Main = {
  data() {
    return {
      tableData: [{
        date: '2016-05-01',
        name: 'Cristian Millan',
        address: 'Baja #11'
      },{
        date: '2016-05-02',
        name: 'Jorge Cabrera',
        address: 'Progreso #18'
      },{
        date: '2016-05-03',
        name: 'Armando Mendivil',
        address: 'Novena #12'
      }],
      dataTheadList: [
          'date',
        'name',
        'address'
      ],
      elTheadList: ['date', 'name', 'address'],
      tableData2: [{
        date: '2016-05-01',
        name: 'Cristian Millan',
        address: 'Baja #11',
        type: 0
      },{
        date: '2016-05-02',
        name: 'Jorge Cabrera',
        address: 'Progreso #18',
        type: 1
      },{
        date: '2016-05-03',
        name: 'Armando Mendivil',
        address: 'Novena #12',
        type: 2
      }],
      dataTheadList2: [
          'date',
        'name',
        'address',
        'type'
      ],
      elTheadList2: ['date', 'name', 'address', 'type']
    }
  },
  mounted() {
   const el = document.querySelector('.tb1 .el-table__header-wrapper tr')
     this.sortable = Sortable.create(el, {
      animation: 180,
      delay: 0,
      onEnd: evt => {
        const oldItem = this.dataTheadList[evt.oldIndex]
        this.dataTheadList.splice(evt.oldIndex, 1)
        this.dataTheadList.splice(evt.newIndex, 0, oldItem)
      }
    })
    
    const el2 = document.querySelector('.tb2 .el-table__header-wrapper tr')
     this.sortable = Sortable.create(el2, {
      animation: 180,
      delay: 0,
      onEnd: evt => {
        const oldItem = this.dataTheadList2[evt.oldIndex]
        this.dataTheadList2.splice(evt.oldIndex, 1)
        this.dataTheadList2.splice(evt.newIndex, 0, oldItem)
      }
    })
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')