vue3 处理elementPlus的Tree树状结构的选中和编辑数据回显

1.问题: el-tree回显ui是需要根据我们选中的id来回显 check-strictly如果添加这个属性的话 有没办法进行父子关联所有比较麻烦 看了文档的方法使用setCheckedKeys依然没办法生效 然后我就发现了 只要包含父级id 那么下面所有的子级都会被选中 但实际上我们要的效果就是 只要子集没被选中那么父级就不勾选 或者子集没全部选中父级就是半选

   <el-tree
            ref="treeRef"
            :data="data.nodeMenuList"
            :props="defaultProps"
            node-key="id"
            show-checkbox
            :default-expanded-keys="[1]"
            :default-checked-keys="defaultPermTreeSelect"
            @check="checkPermission"
            style="width: 100%"
          />
          // 表格编辑按钮
          <template #handle="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope)">删除</el-button>
        </template>

2.既然知道了问题所在 那么事情就好办了 我们只需要在编辑的时候 把数据中的父级id去掉 只留下子集id那么自然就完成我们这个功能了

const ruleFormRef = ref()
const treeRef = ref()
// 后端返回的数据结构
const defaultProps = {
  children: 'children',
  label: 'title',
}
// 编辑操作 这里我为什么是{scope} 因为我是封装了这个表格的 用到的同学注意这里的数据
const handleEdit = ({ scope }: any) => {
  data.ruleForm = JSON.parse(JSON.stringify(scope.row))
  data.ruleForm.status = scope.row.status === '停用' ? '0' : '1'
  dialogTitle.value = '编辑权限管理员'
  const selectedRules = scope.row.rules.split(',').map(Number)
  // 当前id数据装成数组
  const parentIds = selectedRules.map((item: any) => item)
  const idsArr: any = []
  // 递归找出所有父节点id 从获取的已选择的数据中过滤掉父节点id，从而得到所有子节点
  const processChildren = (children: any) => {
    children.forEach((child: any) => {
      if (child.children.length === 0 && parentIds.includes(child.id)) {
        idsArr.push(child.id)
      }
      if (child.children.length > 0) {
        processChildren(child.children)
      }
    })
  }
  // 遍历节点数据
  store.menuTreeList[0].children.forEach((child: any) => {
    // 如果只有一级
    if (child.children.length === 0 && parentIds.includes(child.id)) {
      idsArr.push(child.id)
    }
    // 多级节点
    if (child.children.length > 0) {
      processChildren(child.children)
    }
  })
  console.log(idsArr, 'idsArr') // 最后打印出来的就是去除父级节点之后的数据
  // 选中子节点
  defaultPermTreeSelect.value = idsArr // 这一步可以加一个nextTick
  dialogVisible.value = true
}

3.选择节点的时候 这里如果后端要求一定要把父级节点加进去的 那么这里也需要我们进行一个处理 如果后端不用我们提交父级id的那么直接把选中的值给他就好

• 为什么需要这样处理呢? 因为饿了么他半选状态的时候 父级节点是不勾选的 这时候返回的其实是没有父级id 这时候我们通过它里面的方法 getHalfCheckedKeys()获取到被勾选的父级节点 包括半选的

const checkPermission = (_checkedNodes: any, checkedKeys: any) => {
  const treeB = treeRef.value.getHalfCheckedKeys()
  data.ruleForm.rules = checkedKeys.checkedKeys.join(',') // 数组转成字符串,形式 这里具体要看你们后端要求的格式
  
  if (treeB.length > 0) {
    data.ruleForm.rules = data.ruleForm.rules.concat(',', treeB.join(',')) //拼接你要提交的数据
  }
}

4.效果图