El-table tree + sortablejs 踩坑记录
# el-table 实现树形结构
- 首先需要 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 弄",
},
],
},
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
- tree-props 参数
{ hasChildren: 'hasChildren', children: 'children' }
1
- hasChildren， 用于懒加载， 若不涉及不需要该属性。
- children， 代表子集数据， 这里有一点特别注意。 其key值需要和当前数据集的值一致，比如你是 a.childList， 就用 childList。 但是都需要在当前层级， 举个反例: 如 a.info.childList 这种就不支持。
# sortablejs
- 位序变更好像有两种方式，可以通过参数配置。这里讲默认的方式。
选中当前 item， 允许 上移/下移 。 上移是指当前目标插入到目标位置之前， 下移指当前目标插入目标位置之后。
例如: [ 1, 2, 3, 4, 5 ] 1 拖到最后 oldIndex = 0 , newIndex = 4 . 其它位置顺延 4 拖到 3 的位置, oldInde = 3, newIndex = 2. 其它位置顺延
- 若涉及父子结构需要特殊处理
- 首先，父子结构在表格上本质是同级的，只是 class 有所不同。所以要拆分 tableData 和 sortData 来处理。
- sortData 是 tableData 的扁平结构。即需要将树形结构压平。
若实现多级结构不允许交叉拖动，需要在 onMove 中通过 level 进行判断，返回 bool 值。
若树形结构变更以后，界面未刷新可以通过变更 table 的 key 值进行刷新。需要特别注意的是，key 值变更后需要重新初始化sortable！！！！！
编辑 (opens new window)
上次更新: 2025/04/15, 03:48:14