饿了吗ui的table表格 使用行拖拽的需求
首先 我们需要 npm install sortablejs --save-dev 安装sortable.js
在页面找到需要被拖拽的表格定义row-key为数据的唯一值 定义class类方便后续方法获取 然后在生命周期钩子运行并定义行拖拽方法即可
<el-table class="able" row-key="resId" header-cell-class-name="header-th" :data="selectedResurce" highlight-current-row></el-table>
import Sortable from 'sortablejs'
mounted() {
this.rowDrop()
},
methods: {
//行拖拽
rowDrop() {
const tbody = document.querySelector('.able .el-table__body-wrapper tbody')
const _this = this
Sortable.create(tbody, {
onEnd({ newIndex, oldIndex }) {
const currRow = _this.selectedResurce.splice(oldIndex, 1)[0]
_this.selectedResurce.splice(newIndex, 0, currRow)
}
})
},
}