element-ui树组件 勾选的同时把同级的节点也勾选

今天遇到个一个比较奇怪的需求，就是一个树菜单，我如果勾选了一个，就必须把同级的查询也勾上就像这样

说一下大致思路

• 获取当前点击的id和父级id
• 根据父id去找到对应的父级查询并勾选

1. 第一步 使用自带的check方法获取需要的值

<el-tree
  ref="tree"
  :data="list"
  :props="{ children: 'children', label:'text' }"
  node-key="id"
  show-checkbox
  @click="getChange"
></tree>

getChange(checkedNode, checkedData) {
  // 获取半选中的节点list，选中的节点id，选中的节点list
 const { halfCheckedNodes, checkedKeys, checkedNodes } = checkedData
  // 勾选最后一级方法
  this.checkedQuery(checkedKeys, halfCheckedNodes, checkedNodes, checkedNode)
}

2. 第二步 根据父id去找到对应的父级查询并勾选

  /**
   * 默认选中查询
   * @param checkedKeys 是选中的id的list
   * @param halfCheckedNodes 是当前所有半选中的节点id的list
   * @param checkedNodes 是所有勾选节点的list
   * @param checkedNode 是当前点击的节点
   */
  checkedQuery(checkedKeys, halfCheckedNodes, checkedNodes, checkedNode) { 
    const node = []
    // 因为可能选中多个所以给选中的节点做一个循环
    checkedNodes.forEach(item => {
      // 判断选中的对象是否被选中
      const index = checkedKeys.indexOf(item.id)
      if (index > -1) node.push(v) // 将选中的给放入node 以免手动勾选时给取消勾选
      // 因为我这边数据是多层，所以可能会造成半选种的父节点很多所以需要循环判断一下
      halfCheckedNodes.forEach(v => {
        if (v.id === item.parentId) {
          // 判断是否是当前点击选中的父节点
          v.children.forEach(val => {
            // 找到查询并把查询丢进去
            if (v.text === '查询') node.push(val)
          })
        }
      })
    })
  }

最后上个代码图

<template>
  <el-tree
    ref="tree"
    :data="list"
    :props="{ children: 'children', label:'text' }"
    node-key="id"
    show-checkbox
    @check="getChange"
  ></el-tree>
</template>
<script>
  data() {
    list: [
      {
        id: 1,
        text: '管理',
        children: [
          {
            id: 3,
            text: '新闻动态',
            parentId: 1,
            children: [
              {
                id: 6,
                text: '查询',
                parentId: 3,
              },{
                id: 7,
                text: '新增',
                parentId: 3,
              },{
                id: 8,
                text: '编辑',
                parentId: 3,
              },{
                id: 9,
                text: '删除',
                parentId: 3,
              }
            ]
          }
        ]
      },{
        id: 2,
        text: '用户查询',
        children: [
          {
            id: 10,
            text: '查询',
            parentId: 2,
          }, {
            id: 11,
            text: '修改',
            parentId: 2,
          }, {
            id: 12,
            text: '删除',
            parentId: 2,
          }
        ]
      }
    ]
  },
  methods: {
    getChange(checkedNode, checkedData) {
      // 获取半选中的节点list，选中的节点id，选中的节点list
      const { halfCheckedNodes, checkedKeys, checkedNodes } = checkedData
      // 勾选最后一级方法
      this.checkedQuery(checkedKeys, halfCheckedNodes, checkedNodes, checkedNode)
    },
    /**
     * 默认选中查询
     * @param checkedKeys 是选中的id的list
     * @param halfCheckedNodes 是当前所有半选中的节点id的list
     * @param checkedNodes 是所有勾选节点的list
     * @param checkedNode 是当前点击的节点
     */
    checkedQuery(checkedKeys, halfCheckedNodes, checkedNodes, checkedNode) { 
      const node = []
      // 因为可能选中多个所以给选中的节点做一个循环
      checkedNodes.forEach(item => {
        // 判断选中的对象是否被选中
        const index = checkedKeys.indexOf(item.id)
        if (index > -1) node.push(v) // 将选中的给放入node 以免手动勾选时给取消勾选
        // 因为我这边数据是多层，所以可能会造成半选种的父节点很多所以需要循环判断一下
        halfCheckedNodes.forEach(v => {
          if (v.id === item.parentId) {
            // 判断是否是当前点击选中的父节点
            v.children.forEach(val => {
              // 找到查询并把查询丢进去
              if (v.text === '查询') node.push(val)
            })
          }
        })
        // 勾选选中对象
        this.$refs.tree.setCheckedNodes(node)
      })
    }
  }
</script>