<el-tree
:props="props1"
:load="loadNode1"
lazy
show-checkbox>
</el-tree><script>
export default {
data() {
return {
props1: {
label: 'name',
children: 'zones',
isLeaf: 'leaf'
},
};
},
methods: {
loadNode1(node, resolve) {
if (node.level === 0) {
return resolve([{ name: 'region' }]);
}
if (node.level > 1) return resolve([]);
setTimeout(() => {
const data = [{
name: 'leaf',
leaf: true
}, {
name: 'zone'
}];
resolve(data);
}, 500);
}
}
};
</script>
默认展开和默认选中
可将 Tree 的某些节点设置为默认展开或默认选中
分别通过
default-expanded-keys和
default-checked-keys设置默认展开和默认选中的节点。需要注意的是，此时必须设置
node-key，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。
<el-tree
:data="data2"
show-checkbox
node-key="id"
:default-expanded-keys="[2, 3]"
:default-checked-keys="[5]"
:props="defaultProps">
</el-tree><script>
export default {
data() {
return {
data2: [{
id: 1,
label: '一级 1',
children: [{
id: 4,
label: '二级 1-1',
children: [{
id: 9,
label: '三级 1-1-1'
}, {
id: 10,
label: '三级 1-1-2'
}] }] }, {
id: 2,
label: '一级 2',
children: [{
id: 5,
label: '二级 2-1'
}, {
id: 6,
label: '二级 2-2'
}] }, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1'
}, {
id: 8,
label: '二级 3-2'
}] }],
defaultProps: {
children: 'children',
label: 'label'
}
};
}
};
</script>
禁用状态
可将 Tree 的某些节点设置为禁用状态
通过
disabled设置禁用状态。
<el-tree
:data="data3"
show-checkbox
node-key="id"
:default-expanded-keys="[2, 3]"
:default-checked-keys="[5]">
</el-tree><script>
export default {
data() {
return {
data3: [{
id: 1,
label: '一级 2',
children: [{
