优化一波el-tree点击节点也可以

树状结构图是个老大难，各种问题层出不穷，今天讲讲优化吧，产品说用户体验不友好，嫌弃旁边的复选框太小，点不着，好家伙，我是没感觉点不着，而且人家官方文档也是点旁边复选框进行选中的。

 没办法，谁让产品大佬说一不二呢，开始优化，

哎呀，其实也不难，点击节点获取唯一id，然后set一波，完美。

且听我细细道来

官方文档中：Element - The world's most popular Vue UI framework

check

当复选框被点击的时候触发

共两个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性

node-click

节点被点击时的回调

共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。

这俩呢，一个是复选框点击时候触发，一个是节点被点击时候触发，都可以拿到node-key的那个唯一值，我这边呢是id

附上代码：

   <el-scrollbar style="height:400px">
        <el-tree
          v-show="searchForm.categoryName"
          ref="searchTree"
          :empty-text="searchTreeEmptyText"
          :class="dialogData.onlyOneSelected?'checkTree':''"
          :filter-node-method="filterNode"
          :props="defaultProps"
          :data="searchTreeData"
          check-strictly
          show-checkbox
          node-key="id"
          @check="checkGroupNode"
          @node-click="handleNodeClick"
        />
      </el-scrollbar>

上面属性中，着重看好node-key，唯一识别id，这按照后端给的唯一值进行渲染即可

还有就是这两个事件

// 选择会触发checkGroupNode方法
    checkGroupNode(checkedNodes, checkedKeys) {
      // 勾选上的数组id
      this.dataList = checkedKeys.checkedKeys
      this.$refs.tree.setCheckedKeys(checkedKeys.checkedKeys)
      this.$refs.searchTree.setCheckedKeys(checkedKeys.checkedKeys)
    },
    // 点击节点
    handleNodeClick(data) {
      const arr = this.dataList
      // 已经勾选，则再次取消，没有勾选，则勾选
      if (arr.some(item => item === data.id)) {
        arr.splice(arr.indexOf(data.id), 1)
      } else {
        arr.push(data.id)
      }
      this.dataList = arr
      this.$refs.tree.setCheckedKeys(arr)
      this.$refs.searchTree.setCheckedKeys(arr)
    },

大概讲一波，check事件，两个参数，咱不了解的话，先打印一波，

可知第一个参数是当前点击的复选框的节点所对应的对象，第二个参数代表树目前的选中状态对象

 有了这个，就可以拿到第二个参数中的checkedKeys，这个数组就是选中的id组成的数组，可以直接用这个方法，设置选中

setCheckedKeys

通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性

(keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 true 则仅设置叶子节点的选中状态，默认值为 false

复选框选中的时候，拿到目前选中数组，储存在data中，我命名为dataList，然后当点击节点的时候，（也相当于点击文案）然后调用handleNodeClick方法，获取储存的在data中的数组，判断如果，点击的节点有就删除，没有就添加，这边来一手es5 some方法加上indexOf判断一手，最后再调用一波setCheckedKeys方法勾选目前数组，达到我们伟大的产品要的需求。