vue---element el-tree全选、清空、展开、收缩等基本功能总结_getcheckedkeys

2、设置选中

可通过node和key(el-tree中需设置node-key，一般为id)设置选中的节点。
setCheckedNodes
设置目前勾选的节点，使用此方法必须设置 node-key 属性
(nodes) 接收勾选节点数据的数组
 this.$refs.tree.setCheckedNodes([
        { id: 2, label: "一级 2" },
          id: 7,
          label: "二级 3-1"
  setCheckedKeys 通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性 (keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 true 则仅设置叶子节点的选中状态，默认值为 false 
this.$refs.tree.setCheckedKeys([5, 8]); 
3、全选、清空 
①遍历所有的节点，并设置其checked属性为true或false 
//  获取根节点
      let rootNode = this.$refs.tree.getNode(this.treeData[0].id).parent;
      travelNodes(rootNode);
      function travelNodes(tmpRoot) {
        // 选中该节点
        tmpRoot.checked = true;
        // 叶子节点
        if (tmpRoot.childNodes.length === 0) {
          return;
        // 不是叶子节点,递归遍历
        else {
          let tmpChildNoes = tmpRoot.childNodes;
          for (let i = 0; i < tmpChildNoes.length; i++) {
            travelNodes(tmpChildNoes[i]);
②通过设置node或key 
 注意：当el-tree设置check-strictly时，通过setCheckedNodes全选方法失效，父子不关联，只能选中一级父节点；通过key方法需要遍历获得key。 
this.$refs.tree.setCheckedNodes(this.treeData);
 // this.$refs.tree.setCheckedKeys([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
 // this.$refs.tree.setCheckedNodes([]);
this.$refs.tree.setCheckedKeys([]); 
4、展开收缩 
遍历所有的节点，并设置其expanded属性为true或false 
 for (let i = 0; i < this.treeData.length; i++) {
          this.$refs.tree.store.nodesMap[this.treeData[i].id].expanded = true;
5、完整代码 
<template>
  <div class="hello">
    <h1>el-tree基本功能</h1>
    <el-tree
      ref="tree"
      :data="treeData"
      show-checkbox
      node-key="id"
      @node-click="handleNodeClick"
      @check-change="handleCheckChange"
      :default-checked-keys="[1]"
      default-expand-all
      :props="defaultProps"
      check-strictly
    ></el-tree>
    <div class="btn">
      <el-button size="mini" type="primary" @click="getChecked">获取选中</el-button>
      <el-button size="mini" type="primary" @click="setChecked">设置选中</el-button>
      <el-button size="mini" type="primary" @click="selectAllNodes">全选</el-button>
      <el-button size="mini" type="primary" @click="clearAllNodes">清空</el-button>
      <el-button size="mini" type="warning" @click="handleSelectAll">全选/清空</el-button>
      <el-select size="mini" v-model="value" @change="selectChange">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
</template>
<script>
export default {
  name: "hello",
  data() {
    return {
      defaultProps: {
        children: "childList",
        label: "label"
      treeData: [
          id: 1,
          label: "一级 1",
          childList: [
              id: 4,
              label: "二级 1-1",
              childList: [
                  id: 9,
                  label: "三级 1-1-1"
                  id: 10,
                  label: "三级 1-1-2"
          id: 2,
          label: "一级 2",
          childList: [
              id: 5,
              label: "二级 2-1"
              id: 6,
              label: "二级 2-2"
          id: 3,
          label: "一级 3",
          childList: [
              id: 7,
              label: "二级 3-1"
              id: 8,
              label: "二级 3-2"
      options: [
          value: "1",
          label: "展开所有"
          value: "2",
          label: "收合所有"
      value: "展开所有",
      checkAll: false
  methods: {
    handleNodeClick(data) {
      // console.log(data);
      this.$refs.tree.getCheckedKeys();
    handleCheckChange(data, checked, indeterminate) {
      // console.log(data, checked, indeterminate);
    //获取选中
    getChecked() {
      // 1.通过node获取
      console.log("通过node获取", this.$refs.tree.getCheckedNodes());
      // 2.通过key获取
      console.log("通过key获取", this.$refs.tree.getCheckedKeys());
    // 设置选中
    setChecked() {
      // 1.通过node设置
      this.$refs.tree.setCheckedNodes([
        { id: 2, label: "一级 2" },
          id: 7,
          label: "二级 3-1"
      // 2.通过key设置
      // this.$refs.tree.setCheckedKeys([5, 8]);
    // 全选
    selectAllNodes: function() {
      //  获取根节点
      let rootNode = this.$refs.tree.getNode(this.treeData[0].id).parent;
      travelNodes(rootNode);
      function travelNodes(tmpRoot) {
        // 选中该节点
        tmpRoot.checked = true;
        // 叶子节点
        if (tmpRoot.childNodes.length === 0) {
          return;
        // 不是叶子节点,递归遍历
        else {
          let tmpChildNoes = tmpRoot.childNodes;
          for (let i = 0; i < tmpChildNoes.length; i++) {
            travelNodes(tmpChildNoes[i]);
    // 清空
    clearAllNodes: function() {
      this.$refs.tree.setCheckedKeys([]);
    // 全选/清空
    //当el-tree设置check-strictly时，通过setCheckedNodes全选方法失效，父子不关联，只能选中一级父节点
    handleSelectAll() {
      if (this.checkAll == false) {
        this.$refs.tree.setCheckedNodes(this.treeData);
        // this.$refs.tree.setCheckedKeys([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
        this.checkAll = true;
      } else {
        // this.$refs.tree.setCheckedNodes([]);
        this.$refs.tree.setCheckedKeys([]);
        this.checkAll = false;
    // 展开收合
    selectChange(value) {
      if (value == 1) {
        // 展开所有
        for (let i = 0; i < this.treeData.length; i++) {
          this.$refs.tree.store.nodesMap[this.treeData[i].id].expanded = true;
      } else if (value == 2) {
        // 收合所有
        for (let i = 0; i < this.treeData.length; i++) {
          this.$refs.tree.store.nodesMap[this.treeData[i].id].expanded = false;
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  width: 600px;
  border: 1px solid rgb(209, 203, 203);
  border-radius: 6px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
.btn {
  margin-top: 20px;
.el-select {
  margin-left: 10px;
  width: 120px;
</style>
参考：element el-tree 
npm install --save el-select-tree
需要element-ui
 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示：
 import 'el-select-tree/lib/element-ui' ;
import Vue from 'vue' ;
import ElSelectTree from 'el-select-tree' ;
Vue . use ( ElSelectTree ) ;
组件内注册
import ElSelectTree from 'el-select-tree' ;
export default {
  components : {
    ElSelectTree
                                    本篇文章将详细讲解  vue3+Element Plus  项目中如何实现el-tree组件的一键全选反选功能：点击一键全选时，将选中所有的节点，当节点未被全部选中时 ，全选框为半选状态。（最后有增加vue2+element ui 实现代码）
                                    1、勾选左侧的功能资源，点击【添加】，可将内容添加到右侧，并且左侧勾选的数据删除；勾选右侧的已选资源，效果同左侧一样；
2、勾选全选，则资源全部添加到右侧，左侧的则显示为空
3、保存后点击编辑，左侧显示未分配的资源，右侧显示已分配的资源
4、后台给到的数据是：所有的资源（多维数组）和已分配的资源（一维数组，包含（半勾选）父级数据）
last 2 versions
最近公司项目（Vue + Element ）需求有用到 tree ，所以呢我去网上找了很多插件，都不是很符合我的要求。最后在GitHub上面找到了一款插件是 iview 的组织结构树  vue-org-tree ,但是由于文档不是特别易懂，自己踩了很多坑。不过定制性特别高，基本上会用到的方法都有了。所以今天来给大家讲解下。
自己也根据业务需求修改了部分内容，下面我也会介绍到我修改的内容，重新修改了包上传到了npm
# use npm
                                    给el-tree加个ref，比如：ref=“menu”  通过this.$refs.menu.getCheckedKeys() 拿到选中的节点数组。如下图所示，getHalfCheckedKeys拿到的节点数组长度是2。如下图所示，getCheckedKeys拿到的节点数组长度是10。虽然说的好像挺清楚的，每个字分开看都能读得懂，连在一起就不懂了。我自己打印测试后，结合图+文字，相信就能看得懂了。改bug的时候发现，我对这两个的区别不是很清楚。
                                    后端返回的数据唯一key值是orgId，通过props属性把id和orgId以及label和orgName对应上了，此时node-key绑定的是id，而是orgId
        ref="tree"
        :props="{id: 'orgId', label: 'orgName'}"
        :data="groupList"
        :filter-node-method="nodeFilter"
        :current-node-key="us