ant-design-vue的a-tree的拖拽排序功能

记录工作实践

目录展示如下

拖拽操作：

html代码如下：

<a-tree 
:treeData="treeData" 
show-icon 
show-line 
draggable 
v-if="treeData.length > 0"
:selected-keys="SelectedCatalogueKeys"
:replace-fields="{ children: 'childrens', key: 'id', value: 'catalogCode', title: 'catalogName' }"
:expandedKeys="expandedKeys" 
@select="onSelect" 
@expand="onExpand" 
@drop="onDropCataSort">

</a-tree>

js代码如下：

// 拖拽方法
    onDropCataSort(info) {
      // 拖动节点
      const dragKey = info.dragNode.eventKey;
      const dropPos = info.node.pos.split("-");
      // 拖动的位置
      const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);

      const node = info.node;//目标节点
      const dragNode = info.dragNode;// 拖动节点
      const dragNodeData = dragNode.dataRef;
      const nodeData = node.dataRef;

      var paramObj = {};
      var data = info.dropToGap
        ? node.$parent.dataRef == undefined
          ? node.$parent.treeData
          : node.$parent.dataRef
        : node.dataRef;

      //判断只能在同级排序
      if (!info.dropToGap) {
        this.$message.warning("只能在同级排序");
        return false;
      } else if (
        (info.node.children || []).length > 0 && // Has children
        info.node.expanded && // Is expanded
        dropPosition === 1 // On the bottom gap
      ) {
        this.$message.warning("请重新拖拽");
      } else if (dropPos.length == 2 && info.dropToGap) {
        this.$message.warning("不能移动到最顶级");
        return false;
      } else {
        if (dragNodeData.pid !== nodeData.pid) {
          this.$message.warning('只能同级排序');
          return false;
        }

        var nodeArray = data.childrens == undefined ? [] : data.childrens;
        nodeArray = nodeArray.filter((item) => {
          if (item.id !== dragNodeData.id) {
            return true;
          }
        });
        var index;
        if (nodeData.pid == dragNodeData.pid) {
          index = info.dropPosition
        } else {
          index =
            dropPos[dropPos.length - 1] < info.dropPosition
              ? info.dropPosition
              : dropPos[dropPos.length - 1];
        }
        // console.log("index: ", index)
        if (!info.dropToGap) {
          nodeArray.push({
            id: dragNodeData.id,
            pid: dragNodeData.pid,
            sort: dragNodeData.sort
          });
        } else {
          nodeArray.splice(index == -1 ? 0 : index, 0, dragNodeData);
        }
        nodeArray.forEach((element) => {
          element.pid = dropPos.length == 2 && info.dropToGap ? "" : data.id;
        });
        // console.log("nodeData: ", nodeData)
        // console.log("dropPosition: ", dropPosition)
        nodeArray.forEach((element, i) => {
          if (element.id == dragKey) {
            var dept = {
              id: element.id,
              parentId: element.pid,
              sort: dropPosition == 1 ? i : i + 1,
            };
            paramObj = dept;
          }

        });
      }
      // console.log("拖拽后对象是：", paramObj)
       //此处调用后端接口保存数据（id,sort)
      接口({}, paramObj.id, paramObj.sort).then(res => {
        if (res.success) {
          //操作成功
        }
      })
    },