a-table树形表格拖拽排序 切换层级等问题

html代码

<a-table
      :columns="datacolumns"
      defaultExpandAllRows
      :data-source="dataAtr"
      :customRow="customRow"
    />

js代码如下

import { defineComponent, ref } from 'vue';
  const datacolumns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
      width: '12%',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      width: '30%',
      key: 'address',
    },
  ];
  const dataAtr = ref([
    {
      key: 1,
      name: 'John Brown sr.1',
      age: 60,
      address: 'New York No. 1 Lake Park',
      children: [
        {
          pkey: 1,
          key: 2,
          name: 'John Brown2',
          age: 42,
          address: 'New York No. 2 Lake Park',
        },
        {
          pkey: 1,
          key: 3,
          name: 'John Brown jr.3',
          age: 30,
          address: 'New York No. 3 Lake Park',
        },
        {
          pkey: 1,
          key: 5,
          name: 'Jim Green sr.5',
          age: 72,
          address: 'London No. 1 Lake Park',
        },
      ],
    },
    {
      key: 9,
      name: 'Joe Black9',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
      children: [
        {
          pkey: 9,
          key: 10,
          name: 'John Brown 10',
          age: 42,
          address: 'New York No. 2 Lake Park',
        },
        {
          pkey: 9,
          key: 11,
          name: 'John Brown 11',
          age: 42,
          address: 'New York No. 2 Lake Park',
        },
      ],
    },
    {
      key: 12,
      name: 'Joe Black12',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
    },
  ]);
  //排序拖拽方法
  const startRecord = ref({}); //选移动下标
  const endRecord = ref({}); //移动下标
  const changeData = (list, key, item) => {
    list = list.map((ele) => {
      if (ele.key == key) {
        ele = {
          ...ele,
          name: item.name,  //需要交换的数据 除key 外可以自行替换
        };
        console.log(ele);
        return ele;
      }
      if (ele.children) {
        ele.children = changeData(ele.children, key, item);
      }
      return ele;
    });
    console.log(list);
    return list;
  };
  const customRow = (record: any, index: any) => {
    console.log('=====触发拖拽====', record);
    return {
      style: {
        cursor: 'pointer',
      },
      // 鼠标移入
      onMouseenter: (event) => {
        // 兼容IE
        var ev = event || window.event;
        ev.target.draggable = true; // 让你要拖动的行可以拖动，默认不可以
      },
      // 开始拖拽
      onDragstart: (event) => {
        console.log('=====拖拽的点击事件开始====', record.key, event, index);
        // 兼容IE
        var ev = event || window.event;
        // 阻止冒泡
        ev.stopPropagation();
        // 得到源目标数据序号
        startRecord.value = record;
      },
      // 拖动元素经过的元素
      onDragover: (event) => {
        // 兼容 IE
        var ev = event || window.event;
        // 阻止默认行为
        ev.preventDefault();
      },
      // 鼠标松开
      onDrop: (event) => {
        // 兼容IE
        console.log('=====拖拽的点击事件结束====', record.key, event, index);
        var ev = event || window.event;
        // 非同级不能拖拽
        if (startRecord.value.pkey != record.pkey) {
          ev.target.draggable = false;
          return false;
        } else {
          ev.target.draggable = true;
        }
        // 阻止冒泡
        ev.stopPropagation();
        // 得到目标数据序号
        endRecord.value = record;
        let startKey = startRecord.value.key;
        let endKey = endRecord.value.key;
        // 这里就是让数据位置互换
        dataAtr.value = changeData(dataAtr.value, startKey, endRecord.value);
        dataAtr.value = changeData(dataAtr.value, endKey, startRecord.value);
        console.log(dataAtr.value);
      },
    };
  };