wordpress多站点模式,新浪网页版登录,网站自助制作,轻栈小程序官网前言
这两天遇到一个需求#xff1a;在点击【设置优先级】的按钮后弹出关于玩法类型的table#xff0c;点击【排序】按钮可以后可以进行排序。由于组内使用的组件库是 element-ui#xff0c;那我首先就想到了使用 el-table组件#xff0c;但奈何其版本原因不能相应的拖拽排…前言
这两天遇到一个需求在点击【设置优先级】的按钮后弹出关于玩法类型的table点击【排序】按钮可以后可以进行排序。由于组内使用的组件库是 element-ui那我首先就想到了使用 el-table组件但奈何其版本原因不能相应的拖拽排序的API。了解到有sortable.js。接下来我就以Vueel-tablesortable 为例看看我是怎么实现这个需求的。 实现思路
从官网的 demo 以及其他文章的操作中基本上实现过程如下
const tableData []const _this thissetTimeout((){Sortable.create(el, {onEnd:function (evt){// evt 可以获取到拖拽 DOM 在拖拽之前和拖拽之后的 index// 利用这个参数就可以对table中的列表排序const list tableData; // 备份 table 中的数据const currRow list.splice(evt.oldIndex, 1)[0]; // 获取当前被拖拽的数据list.splice(evt.newIndex, 0, currRow); // 将拖拽的数据从数组中拿出来并插入到新的位置tableData [] // 置空 table 中的数据nextTick((){tableData list // 将最新的数据给table})}})
})但我在实现过程有遇到几个问题。首先直接如上所示拖拽功能是没问题的但是在排序的时候如果不加 nextTicke 那么就会出现你明明只将最后一条数据拖拽到第一行却出现最后两行出现在了最前面…另外这里使用 setTimeout是为了确保能拿到DOM毕竟弹窗时不一定能拿到 table DOM。
源码
由于我是两个table所以使用了 el-tabstab切换时会更新 activeName function initSort() {const _this thissetTimeout(() {const parentEle _this.$refs.playTypeTabsRefconst tab1 parentEle .children[0].querySelectorAll(.el-table__body-wrapper table tbody)[0]const tab2 parentEle .children[1].querySelectorAll(.el-table__body-wrapper table tbody)[0]const targetTab this.activeName playType ? tab1 : tab2const createSortable () {Sortable.create(targetTab, {animation: 150,// ghostClass: blue-background-class,// handle: handle,draggable: .el-table__row,onEnd: function(evt) {const list: (IPlayTypeItem | ISubPlayTypeItem)[] _this.activeName playType ? _this.playTypeList : _this.subPlayTypeListconst currRow: IPlayTypeItem | ISubPlayTypeItem list.splice(evt.oldIndex, 1)[0]list.splice(evt.newIndex, 0, currRow)_this.activeName playType ? _this.playTypeList [] : _this.subPlayTypeList []_this.$nextTick(() {if (_this.activeName playType) {_this.playTypeList list as IPlayTypeItem[]} else {_this.subPlayTypeList list as ISubPlayTypeItem[]}})}})}createSortable()}, 0)}
