El-table tree + sortablejs 踩坑记录

el-table 实现树形结构

1. 首先需要 tableData 是树形结构。

[
  {
    id: 1,
    date: "2016-05-02",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1518 弄",
  },
  {
    id: 2,
    date: "2016-05-04",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1517 弄",
  },
  {
    id: 3,
    date: "2016-05-01",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1519 弄",
    children: [
      {
        id: 31,
        date: "2016-05-01",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1519 弄",
      },
      {
        id: 32,
        date: "2016-05-01",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1519 弄",
      },
    ],
  },
];

2. tree-props 参数

{ hasChildren: 'hasChildren', children: 'children' }

• hasChildren， 用于懒加载， 若不涉及不需要该属性。
• children， 代表子集数据， 这里有一点特别注意。 其key值需要和当前数据集的值一致，比如你是 a.childList， 就用 childList。 但是都需要在当前层级， 举个反例: 如 a.info.childList 这种就不支持。

sortablejs

1. 位序变更好像有两种方式，可以通过参数配置。这里讲默认的方式。

选中当前 item， 允许 上移/下移 。 上移是指当前目标插入到目标位置之前， 下移指当前目标插入目标位置之后。

例如: [ 1, 2, 3, 4, 5 ] 1 拖到最后 oldIndex = 0 , newIndex = 4 . 其它位置顺延 4 拖到 3 的位置, oldInde = 3, newIndex = 2. 其它位置顺延

2. 若涉及父子结构需要特殊处理

• 首先，父子结构在表格上本质是同级的，只是 class 有所不同。所以要拆分 tableData 和 sortData 来处理。
• sortData 是 tableData 的扁平结构。即需要将树形结构压平。

3. 若实现多级结构不允许交叉拖动，需要在 onMove 中通过 level 进行判断，返回 bool 值。

4. 若树形结构变更以后，界面未刷新可以通过变更 table 的 key 值进行刷新。需要特别注意的是，key 值变更后需要重新初始化sortable！！！！！