this.$refs.permissions.setCheckedKeys([]); //删除所有选中节点
this.$refs.permissions.setCheckedNodes([labvalojb]); //选中已选中节点
<el-tree
ref="permissions"
:default-checked-keys="permissionChecked"
@check-change="handleCheckChangePermissions" //节点选中状态发生变化时的回调
@check="handleCheckChangeArea" //当复选框被点击的时候触发
:data="PermissionsTreeData"
show-checkbox
node-key="id"
:check-strictly="true"
:props="PermissionTreeProps" //子父节点定义
>
</el-tree>
data(){
return{
PermissionTreeProps: {
children: "childrens",
label: "name",
},
}
一、编辑赋值时渲染tree
this.$ nextTick(() => {
this.$refs.permissions.setCheckedKeys([id]);
});
handleEdit(index, row) {
this.button = 1;
this.dialogFormVisible = true;
this.form.id = row.id;
this.form.name = row.name;
this.form.action = row.action;
this.form.name = row.name;
this.form.description = row.description;
this.form.http_method = this.radio;
this.title = "修改权限";
let id = row.pid;
if (row.pid === 0) {
id = row.id;
}
this.$nextTick(() => {
this.$refs.permissions.setCheckedKeys([id]);
});
},
二、el-tree 实现单选
handleCheckChangeArea(data) {
var labvalojb = data; //暂存选中节点
this.$refs.permissions.setCheckedKeys([]); //删除所有选中节点
this.$refs.permissions.setCheckedNodes([labvalojb]); //选中已选中节点
this.form.pid = data.id;
},
三、节点选中状态发生变化时的回调
handleCheckChangePermissions() {
this.form.permission_ids = this.$refs.permissions
.getCheckedKeys()
.toString();
},