el-table使用sortablejs拖拽不了

 

背景：

　　最近项目中遇到el-table使用sortablejs拖拽不动，来回看写的都没问题，最后发现是因为放到el-dialog里面会失效！

解决：

  *试着在table外层嵌套一层div好了，贴一段代码看看：

<template>
    <el-dialog>
        // 外层嵌套一层div  并获取该类名下面的tdoby
        <div class="tableData">
            <el-table  ref="dataList2" :data="tableData2" :height="tableHeight"
              tooltip-effect="dark" row-key="id" border stripe  :draggable="true">
              <el-table-column prop="name" label="干部库名称" :show-overflow-tooltip="true" align="center" :sortable="false">
              </el-table-column>
              <el-table-column prop="sortNum" label="排序" :show-overflow-tooltip="true" align="center">
              </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="saveOrders()" :disabled="disabledclick" size="small">保存排序</el-button>
            </div>
          </div>
    </el-dialog>
</template>

<script>
//引入插件
import Sortable from "sortablejs";

export default {
    mounted() {
        this.rowDrop();
    },
    methods: {
        rowDrop() {
          //页面刷新时就会初始化这里
          // 'tableData'  sortablejs会去查找classname为tableData的div，注意要把这个div放到table外层，才有效
          const tbody2 = document.querySelector(
            ".tableData .el-table__body-wrapper tbody"
          ); //允许拖拽的选择器
          console.log("tbody2:" + tbody2);
          const _this = this;
          if (tbody2) { 
            Sortable.create(tbody2, {
              onEnd({ newIndex, oldIndex }) {
                console.log(_this.tableData2, "999");
                _this.isInRowDrop = true;
                const currRow2 = _this.tableData2.splice(oldIndex, 1)[0];
                _this.tableData2.splice(newIndex, 0, currRow2);
              },
            });
          }
        },
    }
  };
</script>