vue项目-封装树形控件公用组件
-
vue项目中，如h5端，第三方的树形选择器无法满足项目开发时，原生封装tree控件，通过判断是否存在子节点，循环递归组件完成树形封装，通过vue指令实现跨级传递数据或方法
封装树形组件如下：
1
2
3
4
5
6
7
8
9 src="../../../assets/images/common/icon-up.png"
10 v-if="expandedKeys.includes(item.key)"
11 />
12
13
14
15
16
17
18
19 {{ item.title }}
20
21
22
23 {{ item.desc }}
24
25
26
27
28
29
30 v-if="!$slots.right"
31 class="ok-checkbox"
32 :class="{ 'ok-checkbox-checked': selectedKeys.includes(item.key) }"
33 >
34
35
36
37
38
39
40
41
42 :list="item.children"
43 v-bind="$props"
44 :selectIds.sync="selectedKeys"
45 v-if="item.children && expandedKeys.includes(item.key)"
46 style="padding-left: 16px"
47 v-on="$listeners"
48 >
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
130
131
父级组件：（部分代码）
1
2 :list="treeData"
3 :selectedIds="selectedKeys"
4 @selectKeys="treeSelectKeys"
5 @expand="expandTree"
6 >
7
自定义说明书8
9
10
11
12
提交树形控件选中父组件传给子组件的数据
1 // 树形控件选择器
2 selectedIds: [],
3 selectedKeys: [],
4 treeData: [
5 {
6 title: '一一级',
7 key: 'one-one-key',
8 desc: '说明书',
9 children: [
10 {
11 title: '一二级',
12 key: 'one-two-key',
13 children: [
14 {
15 title: '一三级',
16 key: 'one-three-key'
17 }
18 ]
19 }
20 ]
21 },
22 {
23 title: '二一级',
24 key: 'two-one-key',
25 desc: '说明书',
26 children: [
27 {
28 title: '二二级',
29 key: 'two-two-key',
30 children: [
31 {
32 title: '二三级',
33 key: 'two-three-key'
34 }
35 ]
36 }
37 ]
38 }
39 ],
方法的调用，数据回传显示
1 treeSelectKeys(ids) {
2 this.selectedKeys = ids;
3 console.log('this.selectedKeys--', this.selectedKeys);
4 console.log('tree调用---keys---回传', this.selectedKeys);
5 },
6 expandTree(targ, keys, data) {
7 console.log('expandTree---', targ, keys, data);
8 if (targ) {
9 // 收起
10 } else {
11 // 展开
12 }
13 },
14 submitTreeSelect() {
15 // 树形控件提交
16 console.log('submitTreeSelect---', this.selectedKeys);
17 },
实现的效果如下：