Tree 树形组件详解 default-expand-all 动态失效问题

1.更具给的数据依次配置

const treeRef = ref(null)
const treeData = ref([])

const props = {              //看下他的事例
  value: "id",
  label: "name",        //按照他的属性名，配置自己的值
  children: "child"
}

2.我这边是根据id唯一值来显示选中状态

3.渲染是正常请求接口就能出现

4.主要是操作其中的数据，比如拿到选中状态的数据 ，我这边后台只需要id就可以了

  let permission_ids = []
   permission_ids = treeRef
    .value!.getCheckedKeys(false)
    .filter(score => score < 1000)

//这个方法返回的是选中状态id的数组
 treeRef.value!.getCheckedKeys(false)

//但是要给组件  node-key="id"  这个树形作为唯一值

5.数据的回显

 //操作自己的数据，给这个方法传入你的id[],我这里permission_ids
treeRef.value!.setCheckedKeys(permission_ids, false)

6.树组件的折叠与展开，这个我找了很久csdn和gpt几乎全是错误的

 <el-tree
            style="max-width: 700px; font-weight: 400"
            :height="280"
            :data="dataRole"
            :ref="'treeRef'"
            :props="props"
            show-checkbox
            node-key="id"
            highlight-current
            :default-expand-all="isfalse"
            :key="treeKey"
          />

    //要给组件加一个key，防止dom不渲染更新
    //才能动态展开与折叠 :default-expand-all="isfalse"

   //同时,展开和折叠会导致数据的选中状态丢失，所以要在之前要储存数据如下

   // 动态展示
    const rebellion = async () => {
     permissions()
     treeKey.value = +new Date()
     isfalse.value = !isfalse.value
     await nextTick()
     treeRef.value!.setCheckedKeys(permission_ids, false)
   }

    // 权限ids
    const permissions = () => {
     permission_ids = treeRef
    .value!.getCheckedKeys(false)
    .filter(score => score < 1000)
   }

---

6_1 回显实现---选中默认展开  

default-expanded-keys：默认展开的节点的 key 的数组

注意--需要在动态在展开折叠中 清空 回显的默认展开，不然会显示不全