效果:
前言:
我們是先只展示一級的,二級的數據是通過點擊之后通過服務器獲取數據,并不是全量數據直接一起返回回來的。
問題:
當你設置了默認選中的子節點,但是由于剛進入頁面此時tree中數據暫是沒有這個子節點時,其父節點并不會具有半選效果
issue地址:
[Feature Request] tree components support setHalfCheckedNodes and setHalfCheckedkeys · Issue #13500 · ElemeFE/element · GitHub
html代碼:
<el-treeref="tree":props="{label: 'Name',isLeaf: 'IsLeaf',}":load="loadNode"lazyshow-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', // 子級的 idOrgId: '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); // 拿到父級的 idif (node) {// 這里是核心代碼node.indeterminate = true // indeterminate強制設置為半選}})}}if (v.Type === 2) {if (s.Id === v.RelationId) {selectKeys.push(v.RelationId);}}});});this.defaultCheckedKeys = selectKeys;},