mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-14 17:31:02 +08:00
93 lines
1.9 KiB
Vue
93 lines
1.9 KiB
Vue
<template>
|
|
<el-tree
|
|
ref="tree"
|
|
:data="data"
|
|
show-checkbox
|
|
default-expand-all
|
|
node-key="id"
|
|
highlight-current
|
|
:props="defaultProps"
|
|
check-on-click-node
|
|
/>
|
|
|
|
<div class="buttons">
|
|
<el-button @click="getCheckedNodes">通过 node 获取</el-button>
|
|
<el-button @click="getCheckedKeys">通过 key 获取</el-button>
|
|
<el-button @click="setCheckedNodes">通过 node 设置</el-button>
|
|
<el-button @click="setCheckedKeys">通过 key 设置</el-button>
|
|
<el-button @click="resetChecked">清空</el-button>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
|
|
data() {
|
|
return {
|
|
data: [{
|
|
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',
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
getCheckedNodes() {
|
|
console.log(this.$refs.tree.getCheckedNodes())
|
|
},
|
|
getCheckedKeys() {
|
|
console.log(this.$refs.tree.getCheckedKeys())
|
|
},
|
|
setCheckedNodes() {
|
|
this.$refs.tree.setCheckedNodes([{
|
|
id: 5,
|
|
label: '二级 2-1',
|
|
}, {
|
|
id: 9,
|
|
label: '三级 1-1-1',
|
|
}])
|
|
},
|
|
setCheckedKeys() {
|
|
this.$refs.tree.setCheckedKeys([3])
|
|
},
|
|
resetChecked() {
|
|
this.$refs.tree.setCheckedKeys([])
|
|
},
|
|
},
|
|
}
|
|
</script>
|