html:
<el-tree
class="tree-border"
:data="menuOptions"
show-checkbox
ref="menu"
node-key="id"
empty-text="加载中,请稍后"
:props="defaultProps"
></el-tree>
:check-strictly="true"是否取消父子联动
data() {
return {
menuOptions: [], // 菜单列表
checkedKeys: [], // 节点选中
defaultProps: {
children: "children",
label: "label",
},
}
}
methods: {
// 所有菜单节点数据
getMenuAllCheckedKeys() {
let checkedKeys = this.$refs.menu.getCheckedKeys();
// 半选中的菜单节点
let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
return checkedKeys;
},
在其他方式使用
this.getMenuAllCheckedKeys().join()
eg: let data = {
a: this.getMenuAllCheckedKeys().join()
}
回显
数据格式: [1,2,3,4]
this.$nextTick(() => {
console.log(res.checkedKeys,'res.checkedKeys')
this.$refs.menu.setCheckedKeys(res.checkedKeys);
});
}
vue+element tree树的使用
于 2023-06-06 16:50:21 首次发布