12.el-tree默认全选然后进行查询

需求：进入页面以后el-tree默认全选且根据选择的树节点id进行查询

思路：

获取树数据后,获取全部的第一级的 id ,然后调用 tree 的 setCheckedKeys() 方法让树进行全选, setCheckedNodes() 方法也可,但是没用过。

  let checkedList = [];
  this.treeData.forEach((item) => {
    checkedList.push(item.id);
  });
  this.$refs.treeRef.setCheckedKeys(checkedList);

一般我们获取选中节点的 id,都是通过 tree 的 check 事件,去获取树目前选中的状态。

  <el-tree
    :props="defaultProps"
    :show-checkbox="showCheckbox"
    :node-key="nodeKey"
    @node-click="hanlderNodeClick"
    @check="handlerCheckAction"
    ref="treeRef"
  >
  </el-tree>

check 事件两个参数,第一个当前选中的节点,第二个是树目前选中的状态对象,我们一般用第二个参数。

第二个参数有四个对象( checkedNodes 选中节点、checkedKeys 选中节点的 key、halfCheckedNodes 半选中节点、halfCheckedKeys 半选中节点的 key)。

我们查询的时候一般用选中节点的 id,只要子 id,不要父 id,所以我们用 checkedNodes 对象的 hasChildren 属性判断该节点下有没有子节点,如果为 true 就代表有,我们就不要这个 id,如果 false 就表示这是最后一个子节点,我们就保存。

    handlerCheckAction(node, e) {
      // 获取选中的node
      this.selectedNodes = e.checkedNodes;
      // 这就是我们要的子节点数组
      let ids = [];
      this.selectedNodes.forEach((item) => {
        if (!item.hasChildren) {
          ids.push(item.id);
        }
      });
    },

但是我们这次全选用的就不是 check 事件了,就无法获取 选中的 node 数组。

所以我们可以通过 getCheckedNodes() 来获取树中被选中的节点数组。

  let checkedList = [];
  this.treeData.forEach((item) => {
    checkedList.push(item.id);
  });
  this.$refs.treeRef.setCheckedKeys(ids);
  this.$nextTick(() => {
    const checkNodesList = this.$refs.treeRef.getCheckedNodes();
  });