1、拖拽后,同页面切换tab,表格数据更新,表头显示顺序有误(拖拽[1,2,3]➡[2,1,3],更新后为[5,4,6],应为[4,5,6])
原代码
<el-table-column v-for="(item, index) in col"
:key="`col_${index}`"
:prop="dropCol[index].prop"
:label="item.label">
</el-table-column>
原因:key值绑定固定,拖拽后不随表格更新
解决方案::key="`col_${index}`" ➡ :key="item.value"
<el-table id="crTable" ref="multipleTable" ……>
<el-table-column prop="name" label="name">
</el-table-column>
<el-table-column v-for="(item, index) in value" :key="item.value"
:prop="dropValue[index].value" :label="item.label"
align="center">
</el-table-column>
</el-table>
2、拖拽后改变表格列宽度,目标列宽度不变,原该位置的表格列宽度改变(拖拽[1,2,3]➡[2,1,3],改变2宽度,2宽度不变,1宽度改变,即第一列宽度未改变,第二列宽度改变)
原因:表格未更新,property值仍为拖拽前绑定的值
解决方案:更改表格key值更新表格(因此可用dropValue一个数组设置表格列prop和label),并在$nextTick回调中重新调用create方法,否则property值更新但只能拖拽一次
<el-table id="crTable" ref="multipleTable" :key="tableKey" ……>
<el-table-column prop="name" label="name">
</el-table-column>
<el-table-column v-for="(item, index) in dropValue" :key="item.value"
class-name="dropTableColumn"
:prop="item.value" :label="item.label" align="center">
</el-table-column>
</el-table>
<script>
……
export default {
data () {
return {
tableKey: 0,
}
},
mounted () {
this.tableKey = 0
this.rowDrop()
this.columnDrop()
},
methods: {
// 列拖拽
columnDrop () {
const wrapperTr = document.getElementById('crTable').querySelector('.el-table__header-wrapper tr')
const _this = this
this.sortableObj = Sortable.create(wrapperTr, {
animation: 180,
delay: 0,
ghostClass: 'column-ghost', // 停靠位置样式
// dragClass: 'drag', // 拖动对象移动样式
// chosenClass: 'chosen', // 选中样式
// forceFallback: true, // 禁用html5原生拖拽行为
draggable: '.dropTableColumn', // 指定可以拖动的元素
// handle: '.dropText', // 指定拖拽句柄才能拖动父元素
onEnd: evt => {
const oldItem = _this.dropValue[evt.oldIndex]
_this.dropValue.splice(evt.oldIndex, 1)
_this.dropValue.splice(evt.newIndex, 0, oldItem)
_this.tableKey += 1
this.$nextTick(() => {
this.rowDrop()
this.columnDrop()
})
}
})
},
},
}
</script>
3、改变表格列宽度时,该表格列会进入拖拽状态,其余表格列无法被拖动
原因:可拖拽区域与可改变宽度区域重叠
解决方案:探索中……