vue el-table 行内拖拽

1.安装Sortable.js

npm install sortablejs --save

2.在页面中引入:

import Sortable from ‘sortablejs’

<el-table :data="tableData"  row-key="id" @selection-change="handleSelectionChange" ref="multipleTable">
                <el-table-column type="selection" width="55" >
                el-table-column>
                <el-table-column v-for="(item, index) in col"   :key="`col_${index}`"
                                 :prop="dropCol[index].prop"    :label="item.label">
                el-table-column>
                <el-table-column label="必选项" width="65">
                <template slot-scope="scope">
                <el-checkbox class="checkbox_inner" @change="handleSelection(scope.$index,scope.row)">el-checkbox>
                
              template>
              el-table-column>
            el-table>

mounted 调用

mounted () {
  this.rowDrop();
},
methods: {
   //行内拖拽
   rowDrop () {
     // 此时找到的元素是要拖拽元素的父容器
     const tbody = document.querySelector(".el-table__body-wrapper tbody");
     Sortable.create(tbody);
   },
}

你可能感兴趣的:(vue,element,el-table,vue)