回到顶部

「 初音未来：歌姬计划 Mega39's+\游戏档案馆 」2023-06-07 「 戴拿&盖亚奥特曼\皮套摄影 」2024-08-02 「 宝可梦：白金\游戏档案馆 」2023-08-06 「 闪焰王牌/模玩摄影 」2024-08-06 「 多龙巴鲁托\模玩摄影 」2023-06-05 「 泽塔奥特曼\皮套摄影 」2023-06-07 「 阿尔宙斯\模玩摄影 」2023-06-07

el-table配合sortablejs实现拖拽 #146

Anuluca Date : 2023-05-29 Tags : 4

思路：
首先el-table上面row-class-name绑定要传的id，
然后将树形结构的数据转换成平铺的列表结构，

拖拽结束后的监听事件onEnd内可以获取到
通过拖拽可以获取到旧数据与新数据对象以及拖拽后平铺的数据顺序，
这时可以通过拖拽后平铺的数据顺序配合parentId来知道当前层级的顺序和id
将这排好顺序的id数组传给后端，后端返回最新的数据

拖拽中事件监听onMove内可以阻止树形结构内的子集拖拽出去。

1.引入sortablejs

1	npm install sortablejs --save

2.组件中使用

1	import Sortable from 'sortablejs';

1	<el-table :data="menuList" row-key="menuId" :row-class-name="tableClassNmae" :expand-row-keys="expandRowKeys" v-if="showFlag"></el-table>

tableClassNmae(row){
   return 'id=' + row.row.id + ''
}

// 将树数据转化为平铺数据
function treeToTile(treeData, childKey = 'children') {
  const arr = []
  const expanded = data => {
    if (data && data.length > 0) {
      data.filter(d => d).forEach(e => {
        arr.push(e)
        expanded(e[childKey] || [])
      })
    }
  }
  expanded(treeData)
  return arr
}


let activeRows = reactive([]);
let flag = true;
let expandRowKeys=ref([]) //展开行的id,底下用的是拖拽行的parentId，其实就是应该展开的行
let showFlag=ref([true])
let menuList=ref([]) //表格数据
onmounted(()=>{
  //获取需要添加拖拽的组件
  const el = document.querySelector(".el-table__body-wrapper tbody");
  //设置拖拽的参数
  const ops = {
    animation: 200, //动画时长
    handle: ".el-table__row", //可拖拽区域class
    ghostClass: "ghost", //拖拽位置样式class
    dataIdAttr: "class", //配合row-class-name设置使用
    //拖拽中事件监听
    onMove: ({ dragged, related }) => {
      activeRows = treeToTile(props.tdata) // 把树形的结构转为列表再进行拖拽  
      const oldRow = activeRows[dragged.rowIndex] //旧位置数据
      const newRow = activeRows[related.rowIndex] //被拖拽的新数据
      if (oldRow.parentId !== newRow.parentId) {
        flag = false
      } else {
        flag = true
      }

      return flag
    }, 
   //拖拽后事件监听
    onEnd(evt) {
      activeRows = treeToTile(props.tdata) // 把树形的结构转为列表再进行拖拽  
      const oldRow = activeRows[evt.oldIndex] // 移动的那个元素
      var arr = sortable2.toArray(); //获取排序后的平铺数据顺序
      for (let index = 0; index < arr.length; index++) {
        arr[index] = arr[index].match(/(?<=\bid=)[\d]+/g)[0];
      }
      let aa = activeRows.filter(d => d.parentId != oldRow.parentId).map(d => d.id);
      let bb = (arr.filter(d => aa.indexOf(d) == -1))
    if (evt.oldIndex !== evt.newIndex) {
      if (flag) {
       //调用后台接口传出bb排好序的数组，让后端返回排好的数据，在请求成功的回调里执行如下操作
        showFlag.value=false;  //刷新拖拽后的结构
           nextTick(()=>{
           showFlag.value=true;   //刷新拖拽后的结构
           menuList.value=res.data;  //重新赋值
           expandRowKeys.value=[...e.parentId]  //拖拽后让原有的行展开
       }) 
           expandRowKeys=[...oldRow.parentId] //让选中行展示
       }
      }
    },
  };
  // //初始化拖拽表格
  var sortable2 = Sortable.create(el, ops);
})