vue中element-ui 树形控件-树节点的选择(选中当前节点,获取当前id并且获取其父级id)

谁践踏了优雅 2022-05-06 12:28 1379阅读 0赞

**Element-ui官网给的方法**

getCheckedKeys() { console.log(this.$refs.tree.getCheckedKeys()); },

这种只有在所有子级都被选中的情况下才能获得父级的id，如果不选中所有的子级那么获取得到的id就只有子级的。但是一般提交数据时后台都需要父级id的。  
**有两种方法解决:**

1.  1 ,找到项目中的\\node\_modules\\element-ui\\lib\\element-ui.common.js文件
2.  2,搜索文件中的`TreeStore.prototype.getCheckedNodes`方法中的

if (child.checked && (!leafOnly || leafOnly && child.isLeaf)) {
              checkedNodes.push(child.data);
            }

1.  3,修改为

if ((child.checked || child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) {
              checkedNodes.push(child.data);
            }

1.  4,然后重启项目  
    `console.log(this.$refs.tree.getCheckedKeys());`就可以拿到父节点的ID啦
2.  **第二种方法**:复制代码

代码:要有pid:xxx

methods: {
          getCheckedNodes() {
            var rad=''
            var ridsa = this.$refs.tree.getCheckedKeys().join(',')// 获取当前的选中的数据[数组] -id, 把数组转换成字符串
            var ridsb = this.$refs.tree.getCheckedNodes()// 获取当前的选中的数据{对象}
            ridsb.forEach(ids=>{//获取选中的所有的父级id
              rad+=','+ids.pid
            })
            rad=rad.substr(1) // 删除字符串前面的','
            var rids=rad+','+ridsa
            var arr=rids.split(',')//  把字符串转换成数组
            arr=[...new Set(arr)]; // 数组去重
            rids=arr.join(',')// 把数组转换成字符串
            console.log(rids)
          }
        }

测试代码

<template>
      <div>
        <el-tree
      :data="data2"
      show-checkbox
      default-expand-all
      node-key="id"
      ref="tree"
      highlight-current
      :props="defaultProps">
    </el-tree>
    
    <div class="buttons">
      <el-button @click="getCheckedNodes">获取</el-button>
      <el-button @click="resetChecked">清空</el-button>
    </div>
      </div>
      </template>
      <script>
      export default {
       methods: {
          getCheckedNodes() {
            var rad=''
            var ridsa = this.$refs.tree.getCheckedKeys().join(',')// 获取当前的选中的数据[数组] -id, 把数组转换成字符串
            var ridsb = this.$refs.tree.getCheckedNodes()// 获取当前的选中的数据{对象}
            ridsb.forEach(ids=>{//获取选中的所有的父级id
              rad+=','+ids.pid
            })
            rad=rad.substr(1) // 删除字符串前面的','
            var rids=rad+','+ridsa
            var arr=rids.split(',')//  把字符串转换成数组
            arr=[...new Set(arr)]; // 数组去重
            rids=arr.join(',')// 把数组转换成字符串
            console.log(rids)
          },
          resetChecked() {
            this.$refs.tree.setCheckedKeys([]);
          }
        },
    
        data() {
          return {
            data2: [{
              pid:0,
              path:xxxx,
              id: 1,
              label: '一级 1',
              children: [{
                pid:1,
                path:xxxx,
                id: 11,
                label: '二级 1-1'
              },
              {
                pid:1,
                path:xxxx,
                id: 12,
                label: '二级 1-2'
              },
              {
                pid:1,
                path:xxxx,
                id: 13,
                label: '二级 1-3'
              }]
            }],
            defaultProps: {
              children: 'children',
              label: 'label'
            }
          };
        }
      };
    </script>
      </script>
      <style scoped>
      </style>

**如果是三级或者是多级,响应的数据格式必须要有’path:xxxx’,这样才能获取其父级id**  
响应的数据格式

{
      "data": [
          {
              "id": 30,
              "path": xxxx,
              "children": [
                  {
                      "id": 101,
                      "path": xxxx,
                      "children": [
                          {
                              "id": 104,
                              "path": xxxx,
                              "children": [
                                  {
                                      "id": 105,
                                      "path": xxxx
                                  }
                              ]
                          }
                      ]
                  }
              ]
          }
      ],
      "meta": {
          "msg": "获取成功",
          "status": 200
      }
    }

> 这里是引用