el-table拖拽开发实践
当前使用的 element-ui-el-table-draggable 提供了对element-ui内el-table的行进行拖拽排序的能力 不足之处 element-ui-el-table-draggable 只能配置两个参数，不支持列拖拽，不支持类似group等参数 改进和开发记录 基本属于重写了, 根据核心原理做了一个出来, 也就是，dom结构使用.el-table__body-wrapper tbody，然后直接交换el-table这个data对应index的数据 重点提示，需要给el-table增加row-key，保证交换之后重新渲染的数据正确！！！ const elTableContext = this.$children[0] // 因为是通过slot引入 const container = elTableContext.$el.querySelector('.el-table__body-wrapper tbody') Sortable.create(container, { onEnd(evt) { let { newIndex, oldIndex, } = evt // 交换elTableContext.data里的位置，不展开了 exchange(oldIndex, newIndex) this.$emit('sort') } }) 之后我们解决几个核心问题 不能使用sortable.js的配置（例如group属性来多列表之间拖拽） 跨表格数据更新 支持列拖拽 expanded的row特殊处理 空处理 sortable.js配置 这个好解决，一方面是可以配置props, 另一方面，我们可以使用$attrs这个属性，将未在props内定义的属性直接获取 Sortable.create(container, { ...this.$attrs, // sortable的onXXX事件转为vue的事件格式emit掉 ...Object.keys(this.$listeners).reduce((events, key) => { const handler = this.$listeners[key] // 首字母大写 const eventName = `on${key.replace(/\b(\w)(\w*)/g, function($0, $1, $2) { return $1.toUpperCase() + $2.toLowerCase() })}` events[eventName] = (...args) => handler(...args) return events }, {}), onEnd(evt) { // 之前的处理代码 this.$emit('end', evt) }, }) 同时增加一个监听，自动更新对应的参数 ...