element解决树结构默认选中踩坑记录


碰到的一个离奇问题 tree这个组件子数据明明没有全部选中结果树结构的子节点,却显示全部选中了节点,后来发现是因为父节点的id出现了就默认子节点全部选中,所以就不能再用default-checked-keys这个属性。改为默认提供的原型链setCheckedKeys方法。
下面晒方法

引用的组件

<el-tree :data="data"
                 show-checkbox
                 :node-key="node_key"
                 ref="menuListTree"
                 :default-expanded-keys="defaultExpandKeys"
                 :default-checked-keys="defaultCheckKeys"
                 :props="defaultProps">
        </el-tree>

外部方法

import { getAllNode, getAllKey } from '@/utils/tree.js'
export const getAllNode = (arr, name, childName) => {
  let str
  const arrs = []
  if (!arr) {
    return
  }
  if (!name) {
    name = 'id'
  }
  if (!childName) {
    childName = 'children'
  }
  const getChild = (arr) => {
    for (let i = 0; i < arr.length; i++) {
      arrs.push(arr[i][name])
      if (arr[i][childName] && arr[i][childName].length > 0) {
        getChild(arr[i].children)
      }
    }
    str = arrs

    return str
  }
  return getChild(arr)
}
export const getAllKey = (arr, name, childName) => {
  let str
  const arrs = []
  var ceshi = []
  if (!arr) {
    return
  }
  if (!name) {
    name = 'id'
  }
  if (!childName) {
    childName = 'children'
  }
  const getChild = (arr) => {
    for (let i = 0; i < arr.length; i++) {
      arrs.push(arr[i][name])
      if (arr[i][childName] && arr[i][childName].length > 0) {
        getChild(arr[i].children)
      } else {
        if (arr[i].status === '1') {
          ceshi.push(arr[i].id)
        } else {
          console.log('sdfasdf')
        }
      }
    }
    str = ceshi

    return str
  }
  return getChild(arr)
}

js部分代码


 fnGetbumen (id) {
      this.loading = true
      this.$http({
        url: this.$http.adornUrl('/api/AdminUser/showJurisdiction'),
        method: 'post',
        data: this.$http.adornData({
          group_id: id
        })
      }).then(({ data }) => {
        this.loading = false
        if (data.code === '1') {
          this.data = data.data
          this.defaultExpandKeys = getAllNode(data.data, 'id', 'children')
          // this.defaultCheckKeys = data.xuan_str.split(',')
          this.$refs.menuListTree.setCheckedKeys(getAllKey(data.data, 'id', 'children'),  true) //重点是这句话,将所需要的数据转换成想要的数据
        } else {
          this.$message({
            type: 'error',
            message: data.msg
          })
        }
      })
    },
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐