element中el-tree根据后端返回数据,构建父节点半选状态

1、模板:

            <el-tree
              ref="tree"
              class="tree"
              :data="permission"
              :indent="0"
              :empty-text="loading"
              show-checkbox
              node-key="menuId"
              highlight-current
              :props="defaultProps"
              @check-change="checkChange"
            />

data定义:

  data() {
    return {
      defaultProps: {
        children: 'child',
        label: 'name'
      },
      select: [],
      permission: [],
      roleName: '',
      roleList: [],
      dialogAddgsVisible: false,
      title: '',
      checkBoxData: [],
      tableKey: 1,
      list: null,
    }
  },

2、
js处理:
2.1 查询出该角色拥有的权限

    handleUpdate(val) {
      this.dialogAddgsVisible = true
      this.title = '编辑下拉选项'
      roleDetail(val.roleId).then(response => {
        if (response.code === 0) {
          this.ruleForm = response.role
          this.select = response.role.menuIdList
          console.log('==该角色拥有的权限===', this.select)
        }
        this.setChecked()
      })
      this.getbList()
    },

2.2系统拥有的全部权限

    // 获取所有权限
    getbList() {
      const datas = []
      permissionData(this.id).then(response => {
        console.log('查看返回数据' + response.code)
        this.permission = response.menuList
        console.log('查看返回数据的长度', response.menuList)
        this.getDataTree(datas)
      })
    },

2.3将查询到的权限构建为数组

    // 构建数组结构
    getDataTree(datas) {
      datas = this.permission
      datas.forEach(ele => {
        const parentId = ele.parentId
        if (parentId === 0) {
          // 不处理
        } else {
          datas.forEach(d => {
            if (d.menuId === parentId) {
              let childArray = d.child
              if (!childArray) {
                childArray = []
              }
              childArray.push(ele)
              d.child = childArray
            }
          })
        }
      })
      datas = datas.filter(ele => ele.parentId === 0)
      this.permission = datas
      if (this.permission.length === 0) {
        this.loading = '暂无数据'
      }
      console.log('查看返回数据的长度2:' + this.permission)
    },

2.3向el-tree中set选中状态

    // 向el-tree中set状态
    setChecked() {
      console.log('===进入设置状态==', this.select)
      const getCheck = this.select
      if (getCheck.length > 0) {
        getCheck.forEach((i, n) => {
          const node = this.$refs.tree.getNode(i)
          console.log('===循环==')
          if (node != null) {
            if (node.isLeaf) {
              this.$refs.tree.setChecked(node, true)
            } else {
              node.indeterminate = true
              node.checked = true
            }
          }
        })
      }
    },
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章