编辑el-icon-edit和删除el-icon-delete按钮需要根据选中状态即时响应
<Tree
ref="tree"
:props="{id: 'orgId', label: 'orgName'}"
:data="groupList"
:filter-node-method="nodeFilter"
:current-node-key="userGroupId"
node-key="orgId"
show-checkbox
highlight-current
default-expand-all
check-strictly
@node-click="handleNodeClick"
@check-change="handleCheckChange">
<span slot-scope="{ node, data }" class="custom-tree-node">
<span>{{ node.label }}</span>
<i v-if="node.checked" class="el-icon-edit" @click="editUserGroup(data, node)" />
<i v-if="node.checked" class="el-icon-delete" @click="deleteOrg(data)"></i>
</span>
</Tree>
给groupList添加了数组中的对象添加了一个checked数据,编辑和删除按钮根据这个数据显示与隐藏,如果不通过$set设置这个数据,页面的编辑和删除按钮不会根据点击选中和取消选中即时的显示与隐藏
handleCheckChange(data, checked) {
// 向响应式对象中添加一个checked属性,且触发视图更新
this.$set(data, 'checked', checked);
this.nodeChecked = checked;
Object.assign(this.groupList, data);
},