Implementation reference

How does the ElementUI tree control get the selected node and the parent node (even if not all selected)

https://segmentfault.com/q/1010000012309004

Upgraded elementUI version

From the original

"element-ui": "2.13.2"

Automatically upgraded to

"element-ui": "^2.15.1"

It’s weird why it’s not upgraded to the version after 2.2. I think the latest official version of elementUI is 2.2.2

My realization

page

Set the selected level to be expanded by default

checkStrictly: false,

dialogVisible: false,

dialogType: 'new',

expandedRoles: [], // Array of keys of nodes expanded by default

defaultProps: {

children:'children', // Specify the subtree as an attribute value of the node object

label:'title'// Specify the node label as an attribute value of the node object

}

<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>

method one

Using two official methods, getCheckedKeys only returns the selected child node, getHalfCheckedKeys only returns the selected parent node, and the return value is spliced to get the selected parent and child node.

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

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

Actual measurement: If getCheckedKeys is passed as false, the parent node will not be returned.

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

When all is selected, getHalfCheckedKeys will not return the parent node. Only when it is not fully selected will the parent node be returned.

Method two: final realization

I really don't want to modify the source code, so I should modify it after getting the data.

Use getCheckedNodes to get the node, and loop to get the id and parent pid inside to form an array with repeated values, and the array can be used to remove duplicates.

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)
      }
}

note

checkStrictly: Whether the parent and child nodes are not related, that is, if the parent is selected, will all the child nodes be automatically selected.

When we get the parent-child data returned by the backend to render the page, we hope that it will not be associated. checkStrictly = true

When the page is rendered, we want to associate with the user. 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
      })
},

ElementUI tree control gets the selected node (including parent node)