1661151235812
el-table 想要实现拖曳调整表格顺序的功能,需要借助第三方插件Sortablejs来实现
首先需要安装:
npm install --save sortablejs
在界面中调用:
import Sortable from 'sortablejs'
el-table部分:
其中 row-key 是必须的并且是唯一的,class-name="allowDrag"可以在每个字段上都加上
<el-table
border
:data="strategyList"
ref="strategyTable"
row-key="id"
height="400"
>
<el-table-column label="执行顺序" align="center" type="index" width="80px" class-name="allowDrag"/>
<el-table-column label="策略标识" align="center" prop="strategyMark" min-width="80px" class-name="allowDrag"/>
<el-table-column
label="策略名称"
align="center"
prop="strategyName"
:show-overflow-tooltip="true"
class-name="allowDrag"
/>
<el-table-column
label="关联载荷"
align="center"
prop="loadName"
:show-overflow-tooltip="true"
class-name="allowDrag"
/>
</el-table>
方法部分:
methods: {
// 拖曳表格
dragTable() {
const el = this.$refs.strategyTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
const sortable = Sortable.create(el, {
handle: '.allowDrag',
onEnd: evt => {
const targetRow = this.strategyList.splice(evt.oldIndex, 1)[0]
this.strategyList.splice(evt.newIndex, 0, targetRow)
// 自己的业务逻辑部分
for (let index in this.strategyList) {
this.strategyList[index].sort = parseInt(index) + 1
this.strategyList[index].queue = parseInt(index) + 1
}
}
})
}
}
调用:
如果是正常界面,在mounted中调用
mounted() {
this.dragTable()
}
如果是子组件,在子组件打开时并且子组件加载完成后调用:
watch: {
sortData: {
handler(n, o) {
if (this.sortData.open) {
this.getList()
this.$nextTick(() => {
this.dragTable()
})
}
},
deep: true
}
},