vue element 树形结构获取已勾选
this.defaultCheckedKeys=[]无法置空 可以使用 this.$refs.tree.setCheckedKeys([]) ,第一次使用可能会报错,建议加判断;default-expanded-keys(默认展开项):props="defaultProps" 用法通过render-content方法定义树节点内容(js代码):load="loadChildData" (...
·
this.defaultCheckedKeys=[]无法置空 可以使用 this.$refs.tree.setCheckedKeys([]) ,第一次使用可能会报错,建议加判断;
default-expanded-keys(默认展开项)
:props="defaultProps" 用法
通过render-content方法定义树节点内容(js代码)
:load="loadChildData" (load 加载子树数据的方法,仅仅当lazy属性为true时生效)(js代码)
@node-click="handleNodeClick"
<template>
<div>
<el-tree
ref="asd"
:data="data2"
show-checkbox
default-expand-all
node-key="id"
:default-checked-keys="defaultCheckedKeys"
:props="defaultProps"
@check-change="nodeChange"
@node-click="nodeClick"
>
</el-tree>
</div>
</template>
<script>
export default {
name: 'DynamicTable',
data() {
return {
data2: [
{
name: '用户管理',
id: '101',
children: [
{
name: '添加',
id: '3',
parentId: '1',
children: [
{
name: 'AAAAAA',
id: '544',
parentId: '1'
},
{
name: 'BBBBB',
id: '555',
parentId: '1'
},
]
},
{
name: '删除',
id: '5',
parentId: '1'
},
{
name: '修改',
id: '6',
parentId: '1'
}
]
},
{
name: '角色管理',
id: '2'
},
{
name: '机构管理',
id: '4'
}
],
defaultProps: {
label: 'name',
children: 'children'
},
defaultCheckedKeys: []
}
},
created() {},
methods: {
nodeChange(data, flag, childFlag) {
// 半选
const banxuan = this.$refs.asd.getHalfCheckedKeys()
if (flag === true) {
console.log('新增菜单:' + data.name )
} else {
if (childFlag === true) {
if (!banxuan.includes(data.id)) {
console.log('新增菜单:' + data.name )
}
}
if (!banxuan.includes(data.id)) {
console.log('删除菜单:' + data.name )
}
}
},
nodeClick(data) {
console.log(data.name)
}
}
}
</script>
更多推荐
已为社区贡献2条内容
所有评论(0)