效果:
前言:
我们是先只展示一级的,二级的数据是通过点击之后通过服务器获取数据,并不是全量数据直接一起返回回来的。
问题:
当你设置了默认选中的子节点,但是由于刚进入页面此时tree中数据暂是没有这个子节点时,其父节点并不会具有半选效果
issue地址:
[Feature Request] tree components support setHalfCheckedNodes and setHalfCheckedkeys · Issue #13500 · ElemeFE/element · GitHub
html代码:
<el-tree
ref="tree"
:props="{
label: 'Name',
isLeaf: 'IsLeaf',
}"
:load="loadNode"
lazy
show-checkbox
:filter-node-method="filterNode"
node-key="Id"
:default-checked-keys="defaultCheckedKeys"
@check-change="handleCheckChange"
></el-tree>
需要回显数据:
selectDoctorInfo: [
{
Type: 1,
RelationId: '68d5d334-4eff-4cf4-8152-fa6a45546dae', // 子级的 id
OrgId: 'bbdcbc14-290f-43f6-91d9-fd31529dbec3', // 父级的 id
},
{
Type: 1,
RelationId: '08478d81-9582-4151-9288-fca71beb43fb',
OrgId: 'bbdcbc14-290f-43f6-91d9-fd31529dbec3',
},
{
Type: 2,
RelationId: '63daa04f-be13-481a-8e5e-6160fee89203',
OrgId: '63daa04f-be13-481a-8e5e-6160fee89203',
},
]
核心代码:
onEchoTreeData() {
// 接口返回已选择的数据 allHospitalList: 一级的全部数据 selectDoctorInfo: 需要回显的数据
const selectKeys = [];
this.selectDoctorInfo.forEach((v) => {
this.allHospitalList.forEach((s) => {
if (v.Type === 1) {
if (s.Id === v.OrgId) {
selectKeys.push(v.RelationId);
this.$nextTick(() => {
var node = this.$refs.tree.getNode(v.OrgId); // 拿到父级的 id
if (node) {
// 这里是核心代码
node.indeterminate = true // indeterminate强制设置为半选
}
})
}
}
if (v.Type === 2) {
if (s.Id === v.RelationId) {
selectKeys.push(v.RelationId);
}
}
});
});
this.defaultCheckedKeys = selectKeys;
},