el-tree

1、第一级节点不显示多选框

/deep/ .el-tree > .el-tree-node > .el-tree-node__content .el-checkbox {
  display: none;
}

2、自定义下拉箭头

1）隐藏默认箭头样式
2）自定义图标

<span class="custom-tree-node" slot-scope="{ node, data }">
  <div class="word_style">
    <span class="label_style">
      <img src="@/assets/images2/wenjianjia.svg" v-if="!node.expanded">
      <img src="@/assets/images2/wenjian_01.svg" v-else>
      <span>{{ node.label }}</span></span>
  </div>
</span>

3、根据id设置树节点

// 根据id设置节点
    getItemByIdInTree(item, tree) {
      var id = null
      if (item && item.id) {
        id = item.id
        tree.forEach(ele => {
          if (ele.Id === id) {
            ele.children = item.children
            return
          }
          if (ele.children) {
            this.getItemByIdInTree(item, ele.children)
          }
        })
      }
    }

4、树数据重新渲染，不关闭下拉框

<el-tree
      ref="tree"
      :data="treeList"
      :default-expanded-keys="expandedList"
      node-key="Id"
      highlight-current
      :filter-node-method="filterNode"
      :props="defaultProps"
      :render-after-expand="false"
      @check="getNode"
      @node-expand="handleNodeExpand"
      @node-collapse="handleNodeCollapse"
      icon-class="el-icon-arrow-down"
    >
    </el-tree>

  // 树节点展开
handleNodeExpand(data) {
  // 保存当前展开的节点
  let flag = false
  this.expandedList.some(item => {
    if (item === data.Id) {
      // 判断当前节点是否存在， 存在不做处理
      flag = true
      return true
    }
  })
  if (!flag) {
    // 不存在则存到数组里
    this.expandedList.push(data.Id)
  }
},
// 树节点关闭
handleNodeCollapse(data) {
  this.expandedList.some((item, i) => {
    if (item === data.Id) {
      // 删除关闭节点
      this.expandedList.length = i
    }
  })
},

5、数组重组成树结构

/**
 * 数据转换为树形（递归），示例：toTree(source, 'id', 'parentId', null, 'children')
 * @param {Array} source 数据
 * @param {String} idField 标识字段名称
 * @param {String} parentIdField 父标识字段名称
 * @param {Any} parentIdNoneValue 父级标识空值
 * @param {String} childrenField 子节点字段名称
 * @param {Object} treeOption tree树形配置
 */

export function toTree(
  source = [],
  idField = 'id',
  parentIdField = 'parentId',
  parentIdNoneValue = '',
  childrenField = 'children',
  treeOption = undefined
) {
  const treeOptions = {
    enable: false, // 是否开启转tree插件数据
    keyField: 'key', // 标识字段名称，默认为key
    valueField: 'value', // 值字段名称，默认为value
    titleField: 'title', // 标题字段名称，默认为title

    keyFieldBind: 'id', // 标识字段绑定字段名称，默认为id
    valueFieldBind: 'id', // 值字段名称绑定字段名称，默认为id
    titleFieldBind: 'name' // 标题字段名称绑定字段名称，默认为name
  }
  // 合并tree树形配置
  if (treeOption) {
    Object.assign(treeOptions, treeOption)
  }

  // 对源数据深度克隆
  const cloneData = JSON.parse(JSON.stringify(source))
  return cloneData.filter(parent => {
    // 返回每一项的子级数组
    const branchArr = cloneData.filter(child => parent[idField] === child[parentIdField])

    // 绑定tree树形配置
    if (treeOptions.enable) {
      branchArr.map(child => {
        child[treeOptions.keyField] = child[treeOptions.keyFieldBind]
        child[treeOptions.valueField] = child[treeOptions.valueFieldBind]
        child[treeOptions.titleField] = child[treeOptions.titleFieldBind]
        return child
      })
    }

    // 如果存在子级，则给父级添加一个children属性，并赋值，否则赋值为空数组
    if (branchArr.length > 0) {
      parent[childrenField] = branchArr
    } else {
      parent[childrenField] = undefined
    }

    // 绑定tree树形配置
    if (treeOptions.enable) {
      parent[treeOptions.keyField] = parent[treeOptions.keyFieldBind]
      parent[treeOptions.valueField] = parent[treeOptions.valueFieldBind]
      parent[treeOptions.titleField] = parent[treeOptions.titleFieldBind]
    }

    return parent[parentIdField] === parentIdNoneValue // 返回第一层
  })
}

6、树过滤查询

<el-tree
      ref="tree"
      :data="treeList"
      node-key="Id"
      :filter-node-method="filterNode"
      :props="defaultProps">
</el-tree>
 filterNode(value, data) {
      if (!value) return true
      if (data.organization_name.indexOf(value) !== -1) {
        return true
      } else {
        return false
      }
    },
     // 搜索
    search() {
      this.$refs.tree.filter(this.depParams.organization_name)
    },

7、自定义下拉箭头颜色，没有子级节点不显示下拉箭头

<style>
.el-tree-node__expand-icon {
  cursor: pointer;
  color: #14419d;
  font-size: 12px;
  transform: rotate(0);
  transition: transform 0.3s ease-in-out;
}
</style>