前端开发那些事儿

element UI el-tree回选问题

2021-01-07  本文已影响0人  AShuiCoder

使用el-tree来绘制角色权限,如图:

tree.png

一般都是将选择treeList的id组发给后端,如:[11111111,22222222222,3333333333333,4444444444444],这里会出现一个问题,得先跟后端沟通好,就是半选问题,何为半选呢?看图:

半选.png
半选节点就是有子节点且子节点没有完全被选中的节点。
假设后端要求你把半选节点也要传过去
你可以通过以下代码获取已选中的节点和半选节点
  // ref 是el-tree
  let list = this.$refs.tree.getCheckedKeys()
  const halfList = this.$refs.tree.getHalfCheckedKeys()
  list = [...list, ...halfList]

  // or 
   this.$refs.tree.getCheckedNodes(false, true).map(item => item.id)

接下来就是把该数据传给后端就行了,新增这样就可以啦。

但是编辑的时候问题来了,一般情况下后台会返回你传给他的数据,这里面包含了半选节点的数据,但是设置el-tree的时候,它才不知道你是不是半选节点,就会导致原来的半选节点现在帮你全部把该节点及子孙节点全部选中了,琢磨了好久,终于发现一个可以解决的:

        this.treeList = await getTreeDate()  // 这个是拿到的树的所有数据
        const list = await getResource({ roleId: row.id })  // 这个是根据该角色拿到的tree数据
        const roleTreeList = treeTool.toList(list).map(item => item.id)  // 得到[111,222,3333] 的数据
        this.$nextTick(() => {   // 这个一定不能省略,因为第一次获取 this.$refs.tree可能是null
          roleTreeList.forEach((item, n) => {
            const node = this.$refs.tree.getNode(item)
            if (node.isLeaf) {
              this.$refs.tree.setChecked(node, true)
            }
          })
        })
上一篇下一篇

猜你喜欢

热点阅读