element ui里边el-tree的使用方法
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
<el-tree
:data="data2"
show-checkbox
node-key="id"
ref="DeviceGroupTree"
@check-change="handleChangeClick"
:props="defaultProps">
</el-tree>
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'
}
};
特别说明一下:
获取选择的节点:
this.$refs.DeviceGroupTree.getCheckedKeys()
上边的方法当获取单独的子节点时,不包括父节点
获取子节点和父节点
this.$refs.DeviceGroupTree.getCheckedKeys().concat(this.$refs.DeviceGroupTree.getHalfCheckedKeys())
返回一个数组里边包含着子节点和父节点,但我感觉这样不太好,应该单独分开,子节点和所属的父节点在一起,就看应用场景是啥啦
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)