ElementUI el-table 使用 Sortable.js 排序错误解决

项目中运用 ElementUI 的 el-table 生成的表格,需求运用 Sortable.js 完结拖拽排序的功用,正常的拖拽没问题,可是拖拽后的数组次序与 el-table 烘托的数据不分歧,具体过错如下图所示:

查找缘由发现,应该是未指定 el-table 行数据的 Key,引起 Table 烘托过错,遂添加 row-key=\"index\" ,可是问题仍是没有处理。

由于该组件通过 value 完结双向绑定,数据是通过 v-model 传送过来的,思索数组数据按地址传值,遂运用 slice() 拷贝了新的数据,终究处理问题。

总结:
1、配置 row-key 独一,避免 el-table 烘托数据过错;
2、拷贝数组数据,避免援用传值及双向绑定更新数据引起的过错。

  
降序 提交
import Sortable from \'sortablejs\' export default { props: { value: { type: Array, default: () => [] } }, data() { return { user: {}, items: [], defaultSort: {key: null, desc: 0} }; }, watch: { value: { handler(newVal) { this.items = newVal.slice(); }, immediate: true, deep: true } }, created() { this.$nextTick(() => { this.setSortable() }) }, methods: { // 拖拽排序 setSortable() { const el = this.$refs.settingTable.$el.querySelectorAll(\'.el-table__body-wrapper > table > tbody\')[0] this.sortable = Sortable.create(el, { ghostClass: \'sortable-ghost\', // Class name for the drop placeholder, setData: function(dataTransfer) { dataTransfer.setData(\'Text\', \'\') }, onEnd: evt => { const targetRow = this.items.splice(evt.oldIndex, 1)[0] this.items.splice(evt.newIndex, 0, targetRow); this.items.forEach(ele => { console.log(ele.index, ele.label) }); console.log(\'==================\') } }) }, // 提交 submit() { this.items =this.items.map((item, index) => { item.index = index + 1; return item; }); } } }; .table-setting-view-container { .settings { margin-bottom: 10px; .el-checkbox { margin-left: 20px; } .el-button { float: right; } } ::v-deep .el-table { .el-table__cell { padding: 5px 0; } .el-input { .el-input__inner { height: 24px; line-height: 24px; padding: 0 7px; text-align: right; } } .el-select { width: 100%; .el-input__inner { text-align: center; } } } } .table-view-select-popper { .el-select-dropdown__item { height: 28px; line-height: 28px; padding: 0 7px; text-align: center; } }