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
            }
          }
        })
      }
    },
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章