ElementUI tree控件获取选中的节点（含父节点）

实现参考

ElementUI tree控件如何取得被选中的节点，以及父节点（即使没被全选）

https://segmentfault.com/q/1010000012309004

升级了 elementUI 版本

由原来的

 "element-ui": "2.13.2"

自动升级到了

"element-ui": "^2.15.1"

很奇怪为啥升不到 2.2 以后的版本，我看 elementUI 官方最新版本是 2.2.2

我的实现

页面

设置默认展开有选中的层级

    checkStrictly: false,

      dialogVisible: false,

      dialogType: 'new',

      expandedRoles: [], // 默认展开的节点的 key 的数组

      defaultProps: {

          children: 'children', // 指定子树为节点对象的某个属性值

          label: 'title'// 指定节点标签为节点对象的某个属性值

      }

<el-form-item label="权限">
          <!-- check-strictly 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false -->
          <!-- node-key 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 -->
          <el-tree
            ref="tree"
            :check-strictly="checkStrictly"
            :data="routes"
            node-key="id"
            :default-expanded-keys="expandedRoles"
            :props="defaultProps"
            show-checkbox
          />
</el-form-item>

方法一

使用两个官方方法，getCheckedKeys 只返回选中的子节点，getHalfCheckedKeys 只返回选中的父节点，返回值拼接即可得到选中的父子节点。

var parentIds = this.$refs.tree.getHalfCheckedKeys()

var childsIds = this.$refs.tree.getCheckedKeys()

实测：getCheckedKeys 传参为 false 也不会返回父节点。

handleSubmit() {
      // getCheckedKeys 若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组。
      // (leafOnly) 接收一个 boolean 类型的参数，若为 true 则仅返回被选中的叶子节点的 keys，默认值为 false
      var parentIds = this.$refs.tree.getHalfCheckedKeys()
      var childsIds = this.$refs.tree.getCheckedKeys()
      this.roleForm.menuIds = parentIds.concat(childsIds)
      if (this.dialogType === 'edit') {
        this.updateRole(this.roleForm)
      } else {
        this.addRole(this.roleForm)
      }
},


//谨慎点可以这样写
handleSubmit() {
      // getCheckedKeys 若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组。
      // (leafOnly) 接收一个 boolean 类型的参数，若为 true 则仅返回被选中的叶子节点的 keys，默认值为 false
      var parentIds = this.$refs.tree.getHalfCheckedKeys()
      var childsIds = this.$refs.tree.getCheckedKeys(true)
      // 利用set没有重复的值这一特性, 实现数组去重。Array.form方法可以将 Set 结构转为数组。
      this.roleForm.menuIds = Array.from(new Set(parentIds.concat(childsIds)))
      if (this.dialogType === 'edit') {
        this.updateRole(this.roleForm)
      } else {
        this.addRole(this.roleForm)
      }
},

bug

当全选时，getHalfCheckedKeys 不会返回父节点。只有当不完全选中时，才会返回父节点。

方法二：最终实现

实在不想修改源码，还是拿到数据后改造下吧。

使用 getCheckedNodes 拿到节点，循环获取里面的 id 和 父 pid 组成一个有重复值的数组，使用时数组去重即可。

handleSubmit() {
      // getCheckedKeys 若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组。
      // (leafOnly) 接收一个 boolean 类型的参数，若为 true 则仅返回被选中的叶子节点的 keys，默认值为 false
      var checkedNodes = this.$refs.tree.getCheckedNodes(true)
      var menuIds = []
      checkedNodes.forEach(nodes => {
        menuIds.push(nodes.id,nodes.pid)
      })
      // 利用set没有重复的值这一特性, 实现数组去重。Array.form方法可以将 Set 结构转为数组。
      this.roleForm.menuIds = Array.from(new Set(menuIds))
      if (this.dialogType === 'edit') {
        this.updateRole(this.roleForm)
      } else {
        this.addRole(this.roleForm)
      }
}

注意

checkStrictly：父子节点是否不关联，即选中父，子节点会不会自动全部选中。

在拿到后端传回的父子数据渲染页面时，我们希望不要关联。checkStrictly = true

页面渲染完成，和用户交互时，我们希望关联。checkStrictly = false

handleEdit(scope) {
      this.dialogType = 'edit'
      this.dialogVisible = true
      this.checkStrictly = true
      this.roleForm = deepClone(scope.row.info)
      var menus = deepClone(scope.row.menus)
      var checkedRoles = []
      menus.forEach(item => {
        checkedRoles.push(item.id)
      })
      this.$nextTick(() => {
        this.$refs.tree.setCheckedKeys(checkedRoles)
        this.expandedRoles = deepClone(checkedRoles)
        // set checked state of a node not affects its father and child nodes
        this.checkStrictly = false
      })
},