YbCascaderList 级联列表
# 基础用法
<template>
<el-button @click="handleChange" style="margin-bottom: 10px"
>选中id：233</el-button
>
<el-input
suffix-icon="el-icon-search"
v-model="searchInputValue"
clearable
size="mini"
></el-input>
<yb-cascader-list
:data="data"
ref="cascader"
node-key="id"
empty-text="空的"
highlight-current
v-model="selectKey"
:props="defaultProps"
@current-change="handleCurrentChange"
@node-click="handleNodeClick"
@node-contextmenu="handleNodeContextmenu"
:filter-node-method="filterNode"
:default-page-size="10"
>
</yb-cascader-list>
</template>
<script>
const data =
'[{"id":1,"name":"层级1","children":[{"id":21,"name":"层级1-1","children":[{"id":28,"name":"层级1-1-1","children":[],"disabled":true},{"id":29,"name":"层级1-1-2","children":[]},{"id":30,"name":"层级1-1-3","children":[]},{"id":31,"name":"层级1-1-4","children":[]}]},{"id":22,"name":"层级1-2","children":[]},{"id":23,"name":"层级1-3","children":[]},{"id":24,"name":"层级1-4","children":[]},{"id":25,"name":"层级1-5","children":[]},{"id":26,"name":"层级1-6","children":[]},{"id":27,"name":"层级1-7","children":[]},{"id":227,"name":"层级1-27","children":[]},{"id":228,"name":"层级1-28","children":[]},{"id":229,"name":"层级1-29","children":[]},{"id":230,"name":"层级1-30","children":[]},{"id":231,"name":"层级1-31","children":[]},{"id":232,"name":"层级1-32","children":[]},{"id":233,"name":"层级1-33","children":[]},{"id":234,"name":"层级1-34","children":[]},{"id":235,"name":"层级1-35","children":[]},{"id":236,"name":"层级1-36","children":[]}]},{"id":2,"name":"层级2","children":[],"leaf":true},{"id":3,"name":"层级3","children":[],"leaf":false},{"id":4,"name":"层级4","children":[],"leaf":false},{"id":5,"name":"层级5","children":[],"leaf":false},{"id":6,"name":"层级6","children":[],"leaf":false},{"id":7,"name":"层级7","children":[],"leaf":false},{"id":8,"name":"层级8","children":[],"leaf":false},{"id":9,"name":"层级9","children":[],"leaf":false},{"id":10,"name":"层级10","children":[],"leaf":false},{"id":11,"name":"层级11","children":[],"leaf":false},{"id":12,"name":"层级12","children":[],"leaf":false},{"id":13,"name":"层级13","children":[],"leaf":false},{"id":14,"name":"层级14","children":[],"leaf":false},{"id":15,"name":"层级15","children":[],"leaf":false},{"id":16,"name":"层级16","children":[],"leaf":false},{"id":17,"name":"层级17","children":[],"leaf":false},{"id":18,"name":"层级18","children":[],"leaf":false},{"id":19,"name":"层级19","children":[],"leaf":false},{"id":20,"name":"层级20","children":[],"leaf":false},{"id":100,"name":"层级100","children":[],"leaf":false},{"id":101,"name":"层级101","children":[],"leaf":false},{"id":102,"name":"层级102","children":[],"leaf":false},{"id":103,"name":"层级103","children":[],"leaf":false},{"id":104,"name":"层级104","children":[],"leaf":false},{"id":105,"name":"层级105","children":[],"leaf":false}]';
export default {
watch: {
searchInputValue(val) {
this.$refs['cascader'].filter(val);
},
},
computed: {
data: function () {
return JSON.parse(data);
},
},
data() {
return {
searchInputValue: '',
selectKey: 10,
defaultProps: {
children: 'children',
label: 'name',
isLeaf: 'leaf',
},
};
},
methods: {
handleNodeClick(data, node, vm) {
console.log('handleNodeClick', data, node, vm);
},
handleCurrentChange(data, node) {
console.log('handleCurrentChange', data, node);
},
handleNodeContextmenu(event, data, node, vm) {
console.log('handleNodeContextmenu', event, data, node, vm);
},
handleChange() {
this.selectKey = 233;
},
filterNode(value, data) {
if (!value) return true;
return data.name.indexOf(value) !== -1;
},
},
};
</script>
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
显示 复制 复制
# 懒加载
<template>
<el-input
placeholder="输入 4 即可看见懒加载所搜效果"
suffix-icon="el-icon-search"
v-model="searchInputValue"
clearable
size="mini"
></el-input>
<yb-cascader-list
ref="cascader"
node-key="id"
empty-text="空的"
highlight-current
v-model="selectKey"
:props="defaultProps"
@current-change="handleCurrentChange"
@node-click="handleNodeClick"
@node-contextmenu="handleNodeContextmenu"
:filter-node-method="filterNode"
:default-page-size="10"
:get-cascader-data="getTableData"
>
</yb-cascader-list>
</template>
<script>
const demoData =
'[{"id":1,"name":"层级1","children":[{"id":21,"name":"层级1-1","children":[{"id":28,"name":"层级1-1-1","children":[]},{"id":29,"name":"层级1-1-2","children":[]},{"id":30,"name":"层级1-1-3","children":[]},{"id":31,"name":"层级1-1-4","children":[]}]},{"id":22,"name":"层级1-2","children":[]},{"id":23,"name":"层级1-3","children":[]},{"id":24,"name":"层级1-4","children":[]},{"id":25,"name":"层级1-5","children":[]},{"id":26,"name":"层级1-6","children":[]},{"id":27,"name":"层级1-7","children":[]},{"id":227,"name":"层级1-27","children":[]},{"id":228,"name":"层级1-28","children":[]},{"id":229,"name":"层级1-29","children":[]},{"id":230,"name":"层级1-30","children":[]},{"id":231,"name":"层级1-31","children":[]},{"id":232,"name":"层级1-32","children":[]},{"id":233,"name":"层级1-33","children":[]},{"id":234,"name":"层级1-34","children":[]},{"id":235,"name":"层级1-35","children":[]},{"id":236,"name":"层级1-36","children":[]}]},{"id":2,"name":"层级2","children":[],"leaf":true},{"id":3,"name":"层级3","children":[],"leaf":false},{"id":4,"name":"层级4","children":[],"leaf":false},{"id":5,"name":"层级5","children":[],"leaf":false},{"id":6,"name":"层级6","children":[],"leaf":false},{"id":7,"name":"层级7","children":[],"leaf":false},{"id":8,"name":"层级8","children":[],"leaf":false},{"id":9,"name":"层级9","children":[],"leaf":false},{"id":10,"name":"层级10","children":[],"leaf":false},{"id":11,"name":"层级11","children":[],"leaf":false},{"id":12,"name":"层级12","children":[],"leaf":false},{"id":13,"name":"层级13","children":[],"leaf":false},{"id":14,"name":"层级14","children":[],"leaf":false},{"id":15,"name":"层级15","children":[],"leaf":false},{"id":16,"name":"层级16","children":[],"leaf":false},{"id":17,"name":"层级17","children":[],"leaf":false},{"id":18,"name":"层级18","children":[],"leaf":false},{"id":19,"name":"层级19","children":[],"leaf":false},{"id":20,"name":"层级20","children":[],"leaf":false},{"id":100,"name":"层级100","children":[],"leaf":false},{"id":101,"name":"层级101","children":[],"leaf":false},{"id":102,"name":"层级102","children":[],"leaf":false},{"id":103,"name":"层级103","children":[],"leaf":false},{"id":104,"name":"层级104","children":[],"leaf":false},{"id":105,"name":"层级105","children":[],"leaf":false}]';
const filterData =
'[{"id":1,"name":"层级1","children":[{"id":21,"name":"层级1-1","children":[{"id":31,"name":"层级1-1-4","children":[]}]},{"id":24,"name":"层级1-4","children":[]},{"id":234,"name":"层级1-34","children":[]}]},{"id":4,"name":"层级4","children":[],"leaf":false},{"id":14,"name":"层级14","children":[],"leaf":false},{"id":104,"name":"层级104","children":[],"leaf":false}]';
export default {
watch: {
searchInputValue(val) {
this.$refs['cascader'].filter(val);
},
},
computed: {
demoApiData: function () {
if (this.searchInputValue) {
if (this.searchInputValue === '4') {
return JSON.parse(filterData);
} else {
return [];
}
}
return JSON.parse(demoData);
},
},
data() {
return {
searchInputValue: '',
selectKey: 10,
defaultProps: {
children: 'children',
label: 'name',
isLeaf: 'leaf',
},
};
},
methods: {
handleNodeClick(data, node, vm) {
console.log('handleNodeClick', data, node, vm);
},
handleCurrentChange(data, node, vm) {
console.log('handleCurrentChange', data, node, vm);
},
handleNodeContextmenu(event, data, node, vm) {
console.log('handleNodeContextmenu', event, data, node, vm);
},
filterNode(value, data) {
if (!value) return true;
return data.name.indexOf(value) !== -1;
},
getTableData(query) {
// console.log('query', query, this.demoApiData);
query.keywords = '';
/**** 分页懒加载测试****/
if (!query?.id) {
const data = this.demoApiData
.filter((item) => item.name.includes(query.keywords))
.map((item) => {
return {
...item,
children: [],
};
});
return Promise.resolve({
total: data.length,
tableData: data.slice(
(query.currentPage - 1) * query.pageSize,
query.currentPage * query.pageSize
),
});
} else if (query.id === 1) {
const data = this.demoApiData[0].children
.filter((item) => item.name.includes(query.keywords))
.map((item) => {
return {
...item,
children: [],
};
});
return new Promise((res) => {
setTimeout(() => {
res({
total: data.length,
tableData: data.slice(
(query.currentPage - 1) * query.pageSize,
query.currentPage * query.pageSize
),
});
}, 1000);
});
return Promise.resolve({
total: data.length,
tableData: data.slice(
(query.currentPage - 1) * query.pageSize,
query.currentPage * query.pageSize
),
});
} else if (query.id === 21) {
const data = this.demoApiData[0].children[0].children
.filter((item) => item.name.includes(query.keywords))
.map((item) => {
return {
...item,
children: [],
};
});
return new Promise((res) => {
setTimeout(() => {
res({
total: data.length,
tableData: data.slice(
(query.currentPage - 1) * query.pageSize,
query.currentPage * query.pageSize
),
});
}, 1000);
});
} else {
return Promise.resolve({
total: 0,
tableData: [],
});
}
// if (!query?.id) {
// const data = this.data
// .filter((item) => item.name.includes(query.keywords))
// .map((item) => {
// return {
// ...item,
// children: [],
// };
// });
// return Promise.resolve({
// total: data.length,
// tableData: data,
// });
// } else if (query.id === 1) {
// const data = this.data[0].children
// .filter((item) => item.name.includes(query.keywords))
// .map((item) => {
// return {
// ...item,
// children: [],
// };
// });
// return Promise.resolve({
// total: data.length,
// tableData: data,
// });
// } else if (query.id === 21) {
// const data = this.data[0].children[0].children
// .filter((item) => item.name.includes(query.keywords))
// .map((item) => {
// return {
// ...item,
// children: [],
// };
// });
// return Promise.resolve({
// total: data.length,
// tableData: data,
// });
// } else {
// return Promise.resolve({
// total: 0,
// tableData: [],
// });
// }
},
},
};
</script>
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
显示 复制 复制
# 自定义节点内容
<template>
<yb-cascader-list
:data="data"
ref="cascader"
node-key="id"
empty-text="空的"
highlight-current
v-model="selectKey"
:props="defaultProps"
@current-change="handleCurrentChange"
@node-click="handleNodeClick"
@node-contextmenu="handleNodeContextmenu"
:default-page-size="10"
>
<!-- <template v-slot="{ node, data }">
<span class="custom-tree-node">
<span>{{ node.label }}</span>
<span>
<el-button
type="text"
size="mini"
@click="() => append(data)"
>
Append
</el-button>
<el-button
type="text"
size="mini"
@click="() => remove(node, data)"
>
Delete
</el-button>
</span>
</span>
</template> -->
<!-- 显示横线时追加在横线右边的内容 -->
<template v-slot:node-label="{node}">
<span style="font-size:14px;"
>{{node.label}}<i class="el-icon-star-on"></i
></span>
</template>
<!-- 显示横线时追加在横线右边的内容 -->
<template v-slot:after-node-label="{node}">
<span>
<el-button
type="primary"
size="mini"
@click.stop="openEdit(node)"
>新增子节点</el-button
>
<el-button
type="primary"
size="mini"
@click.stop="openEdit(node)"
>修改</el-button
>
<el-button
type="danger"
size="mini"
@click.stop="openEdit(node)"
>删除</el-button
></span
>
</template>
</yb-cascader-list>
</template>
<script>
const data =
'[{"id":1,"name":"层级1","children":[{"id":21,"name":"层级1-1","children":[{"id":28,"name":"层级1-1-1","children":[]},{"id":29,"name":"层级1-1-2","children":[]},{"id":30,"name":"层级1-1-3","children":[]},{"id":31,"name":"层级1-1-4","children":[]}]},{"id":22,"name":"层级1-2","children":[]},{"id":23,"name":"层级1-3","children":[]},{"id":24,"name":"层级1-4","children":[]},{"id":25,"name":"层级1-5","children":[]},{"id":26,"name":"层级1-6","children":[]},{"id":27,"name":"层级1-7","children":[]},{"id":227,"name":"层级1-27","children":[]},{"id":228,"name":"层级1-28","children":[]},{"id":229,"name":"层级1-29","children":[]},{"id":230,"name":"层级1-30","children":[]},{"id":231,"name":"层级1-31","children":[]},{"id":232,"name":"层级1-32","children":[]},{"id":233,"name":"层级1-33","children":[]},{"id":234,"name":"层级1-34","children":[]},{"id":235,"name":"层级1-35","children":[]},{"id":236,"name":"层级1-36","children":[]}]},{"id":2,"name":"层级2","children":[],"leaf":true},{"id":3,"name":"层级3","children":[],"leaf":false},{"id":4,"name":"层级4","children":[],"leaf":false},{"id":5,"name":"层级5","children":[],"leaf":false},{"id":6,"name":"层级6","children":[],"leaf":false},{"id":7,"name":"层级7","children":[],"leaf":false},{"id":8,"name":"层级8","children":[],"leaf":false},{"id":9,"name":"层级9","children":[],"leaf":false},{"id":10,"name":"层级10","children":[],"leaf":false},{"id":11,"name":"层级11","children":[],"leaf":false},{"id":12,"name":"层级12","children":[],"leaf":false},{"id":13,"name":"层级13","children":[],"leaf":false},{"id":14,"name":"层级14","children":[],"leaf":false},{"id":15,"name":"层级15","children":[],"leaf":false},{"id":16,"name":"层级16","children":[],"leaf":false},{"id":17,"name":"层级17","children":[],"leaf":false},{"id":18,"name":"层级18","children":[],"leaf":false},{"id":19,"name":"层级19","children":[],"leaf":false},{"id":20,"name":"层级20","children":[],"leaf":false},{"id":100,"name":"层级100","children":[],"leaf":false},{"id":101,"name":"层级101","children":[],"leaf":false},{"id":102,"name":"层级102","children":[],"leaf":false},{"id":103,"name":"层级103","children":[],"leaf":false},{"id":104,"name":"层级104","children":[],"leaf":false},{"id":105,"name":"层级105","children":[],"leaf":false}]';
export default {
watch: {
searchInputValue(val) {
this.$refs['cascader'].filter(val);
},
},
computed: {
data: function () {
return JSON.parse(data);
},
},
data() {
return {
searchInputValue: '',
selectKey: 10,
defaultProps: {
children: 'children',
label: 'name',
isLeaf: 'leaf',
},
};
},
methods: {
handleNodeClick(data, node, vm) {
console.log('handleNodeClick', data, node, vm);
},
handleCurrentChange(data, node, vm) {
console.log('handleCurrentChange', data, node, vm);
},
handleNodeContextmenu(event, data, node, vm) {
console.log('handleNodeContextmenu', event, data, node, vm);
},
},
};
</script>
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
显示 复制 复制
# 节点选择
check-on-click-node
<template>
<div style="display: flex; align-items: center">
<div style="margin-right: 20px">
check-on-click-node
<el-switch v-model="checkOnClickNode"></el-switch>
</div>
<el-button @click="resetCheckedKeys">清空选中 key</el-button>
</div>
{{checkedKeys}}
<yb-cascader-list
:data="data"
ref="cascader"
node-key="id"
empty-text="空的"
highlight-current
:props="defaultProps"
@current-change="handleCurrentChange"
@node-click="handleNodeClick"
:default-page-size="10"
show-checkbox
@check="handleCheck"
@check-change="handleCheckChange"
:check-on-click-node="checkOnClickNode"
:expand-on-click-node="false"
>
</yb-cascader-list>
</template>
<script>
const data =
'[{"id":1,"name":"层级1","children":[{"id":21,"name":"层级1-1","disabled":true,"children":[{"id":28,"name":"层级1-1-1","children":[]},{"id":29,"name":"层级1-1-2","children":[]},{"id":30,"name":"层级1-1-3","children":[]},{"id":31,"name":"层级1-1-4","children":[]}]},{"id":22,"name":"层级1-2","children":[]},{"id":23,"name":"层级1-3","children":[]},{"id":24,"name":"层级1-4","children":[]},{"id":25,"name":"层级1-5","children":[]},{"id":26,"name":"层级1-6","children":[]},{"id":27,"name":"层级1-7","children":[]},{"id":227,"name":"层级1-27","children":[]},{"id":228,"name":"层级1-28","children":[]},{"id":229,"name":"层级1-29","children":[]},{"id":230,"name":"层级1-30","children":[]},{"id":231,"name":"层级1-31","children":[]},{"id":232,"name":"层级1-32","children":[]},{"id":233,"name":"层级1-33","children":[]},{"id":234,"name":"层级1-34","children":[]},{"id":235,"name":"层级1-35","children":[]},{"id":236,"name":"层级1-36","children":[]}]},{"id":2,"name":"层级2","children":[],"leaf":true},{"id":3,"name":"层级3","children":[],"leaf":false},{"id":4,"name":"层级4","children":[],"leaf":false},{"id":5,"name":"层级5","children":[],"leaf":false},{"id":6,"name":"层级6","children":[],"leaf":false},{"id":7,"name":"层级7","children":[],"leaf":false},{"id":8,"name":"层级8","children":[],"leaf":false},{"id":9,"name":"层级9","children":[],"leaf":false},{"id":10,"name":"层级10","children":[],"leaf":false},{"id":11,"name":"层级11","children":[],"leaf":false},{"id":12,"name":"层级12","children":[],"leaf":false},{"id":13,"name":"层级13","children":[],"leaf":false},{"id":14,"name":"层级14","children":[],"leaf":false},{"id":15,"name":"层级15","children":[],"leaf":false},{"id":16,"name":"层级16","children":[],"leaf":false},{"id":17,"name":"层级17","children":[],"leaf":false},{"id":18,"name":"层级18","children":[],"leaf":false},{"id":19,"name":"层级19","children":[],"leaf":false},{"id":20,"name":"层级20","children":[],"leaf":false},{"id":100,"name":"层级100","children":[],"leaf":false},{"id":101,"name":"层级101","children":[],"leaf":false},{"id":102,"name":"层级102","children":[],"leaf":false},{"id":103,"name":"层级103","children":[],"leaf":false},{"id":104,"name":"层级104","children":[],"leaf":false},{"id":105,"name":"层级105","children":[],"leaf":false}]';
export default {
computed: {
data: function () {
return JSON.parse(data);
},
},
data() {
return {
defaultProps: {
children: 'children',
label: 'name',
isLeaf: 'leaf',
},
checkedKeys: [],
checkOnClickNode: true,
};
},
methods: {
handleCheckChange(data, checked, indeterminate) {
console.log(data, checked, indeterminate);
},
handleCheck(data, checked, indeterminate) {
this.checkedKeys = this.$refs['cascader'].getCheckedKeys();
},
handleNodeClick(data, node, vm) {
console.log('handleNodeClick', data, node, vm);
},
handleCurrentChange(data, node) {
console.log('handleCurrentChange', data, node);
},
getCheckedKeys() {
this.checkedKeys = this.$refs['cascader'].getCheckedKeys();
},
resetCheckedKeys() {
this.$refs['cascader'].setCheckedKeys([]);
this.checkedKeys = [];
},
},
};
</script>
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
显示 复制 复制
# YbCascaderList Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| data | 展示数据 | array | -- | [] |
| empty-text | 内容为空的时候展示的文本 | string | -- | -- |
| node-key | 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 | string | -- | -- |
| props | 详见 YbCascaderList Props | string | -- | -- |
| default-page-size | 默认每页显示条目个数，不设置则会按照高度计算条数 | number | -- | 10 |
| value | v-model，对应 key 值 | -- | -- | -- |
| get-cascader-data | 加载节点数据，function(data) | function | -- | -- |
| filter-node-method | 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏 | Function(value, data, node) | -- | -- |
| expand-on-click-node | 是否在点击节点的时候展开或者收缩节点， 如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。 | boolean | -- | true |
| check-on-click-node | 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。 | boolean | -- | false |
| show-checkbox | 节点是否可被选择 | boolean | -- | false |
| check-strictly | 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false | boolean | -- | false |
| default-checked-keys | 默认勾选的节点的 key 的数组 | array | -- | [] |
| show-back-breadcrumb | 是否显示层级返回按钮和面包屑 | boolean | -- | true |
| expand-node-position | 展开按钮位置 | string | 'before'|'after' | 'before' |
# YbCascaderList Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| label | 指定节点标签为节点对象的某个属性值 | string | -- | -- |
| children | 指定子树为节点对象的某个属性值 | string | -- | -- |
| disabled | 指定节点选择框是否禁用为节点对象的某个属性值 | boolean | -- | -- |
| isLeaf | 指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效 | boolean | -- | -- |
# YbCascaderList Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| node-click | 节点被点击时的回调 | 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身 |
| current-change | 节点被点击时的回调 | 共两个参数，依次为：当前节点的数据，当前节点的 Node 对象 |
| node-contextmenu | 当某一节点被鼠标右键点击时会触发该事件 | 共四个参数，依次为：event、传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身 |
| check-change | 节点选中状态发生变化时的回调 | 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点 |
| check | 当复选框被点击的时候触发 | 共两个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性 |
# YbCascaderList Methods
| 方法名称 | 说明 | 回调参数 |
|---|---|---|
| filter | 对节点进行筛选操作 | 接收一个任意类型的参数，该参数会在 filter-node-method 中作为第一个参数 |
| getNode | 根据 data 或者 key 拿到组件中的 node | (data) 要获得 node 的 key 或者 data |
| getCurrentKey | 获取当前被选中节点的 key，使用此方法必须设置 node-key 属性，若没有节点被选中则返回 null | -- |
| setCurrentKey | 通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性 | (key) 待被选节点的 key，若为 null 则取消当前高亮的节点 |
| getCurrentNode | 获取当前被选中节点的 data，若没有节点被选中则返回 null | -- |
| setCurrentNode | 通过 node 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性 | (node) 待被选节点的 node |
| setChecked | 通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性 | (key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中 3. boolean 类型，是否设置子节点 ，默认为 false |
| getHalfCheckedNodes | 若节点可被选择（即 show-checkbox 为 true），则返回目前半选中的节点所组成的数组 | -- |
| getHalfCheckedKeys | 若节点可被选择（即 show-checkbox 为 true），则返回目前半选中的节点的 key 所组成的数组 | -- |
| getCheckedNodes | 若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点所组成的数组 | (leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为 false 2. 是否包含半选节点，默认值为 false |
| setCheckedNodes | 设置目前勾选的节点，使用此方法必须设置 node-key 属性 | (nodes) 接收勾选节点数据的数组 |
| getCheckedKeys | 若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数，若为 true 则仅返回被选中的叶子节点的 keys，默认值为 false |
| setCheckedKeys | 通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性 | (keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 true 则仅设置叶子节点的选中状态，默认值为 false |
# YbCascaderList Scoped Slot
| name | 说明 |
|---|---|
| default | 参数为 { node, data } |
| node-label | label 参数为 { node, data } |
| after-node-label | 参数为 { node, data } |
上次更新: 2023/09/25, 17:42:53