elementui树形结构组件

1.需求

这样的树
又或者带选择框的树

2.代码实现

因为这个树不仅是展示上面的节点。我还需要对它进行一些需求操作
这就意味着，我不能通过调用接口来刷新这颗树。否则，你想再定位到之前你点的那个节点就找不到了。因为你之前点的那个节点，在刷新之后就没记录了。比如，对树上的节点进行添加，根据里面唯一值来判断的就会发生改变。第二个为了性能的角度考虑，发送请求过多也不好。所以，下面这篇进行手动添加、删除、定位节点。
template中：

<el-input
  placeholder="输入关键字进行过滤"
  class="filterTree"
  v-model="filterText"
>
</el-input>
<el-tree
  :data="data" // 渲染数据 ，数组里面放对象 [{id: 1},{id: 2}]
  node-key="id" // 重点。唯一值。取上面data数据中的唯一的值
  ref="menuTree"
  :expand-on-click-node="true" // 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
  highlight-current // 点击的节点高亮显示
  default-expand-all // 默认展开全部节点
  draggable // 可拖拽
  @node-click="nodeClick" // 节点点击事件
  :default-expanded-keys="expandedKeys"
  :current-node-keys="id"
  :style="{height: treeHeight + 'px'}"
  :filter-node-method="filterOrgTree"
  :getCurrentNode="getCurrentNode"
>
  <span class="custom-tree-node" slot-scope="{ node, data }" style="width: 100%;" :id="node.matClassCode">
      <span style="display:block;float:left;">{{ node.label }}</span>
      <span style="display:block;float:right;margin-right: 12px;">
          <!-- <el-button
              type="text"
              size="mini"
              @click="() => append(data)">
              Append
          </el-button> -->
          <!-- <el-button
              type="text"
              size="mini"
              class="el-icon-delete"
              @click="() => remove(node, data)">
          </el-button> -->
          <el-button
              type="text"
              size="mini"
              class="el-icon-delete"
              @click="() => deleteCpnDetail(data)">
          </el-button>
      </span>
      <!-- <el-dropdown>
          <span class="el-dropdown-link">
              <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>黄金糕</el-dropdown-item>
              <el-dropdown-item>狮子头</el-dropdown-item>
              <el-dropdown-item>螺蛳粉</el-dropdown-item>
              <el-dropdown-item disabled>双皮奶</el-dropdown-item>
              <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
      </el-dropdown> -->
  </span>
</el-tree>

data中

data () {
  return {
  	nodeRow: {},
  	filterText: ''
  }
}

computed中

computed: {
  treeHeight: function () {
    return window.innerHeight - 110 // 自动计算树的高度，自适应电脑屏幕
  }
},

methods中

methods: {
  //  点击树事件
  nodeClick (item, el) {
    let _this = this;
    _this.nodeRow = item
  },
  filterText (val) {
	this.$refs.menuTree.filter(val);
  }
  介绍两个方法：添加子节点，和添加同级节点
  自己写的：
  // 追加树子节点方法
  // data当前节点数组。是个数组，当前节点数组。哪个方法调用就改下相应的即可。
  // parentNode父节点对象。对象对象，父节点对象
  append (data, parentNode) {
  	  // 赋值，把当前节点对象添加到父节点对象
      this.$refs['menuTree'].getCurrentNode(parentNode.id).children = data
      this.$nextTick(() => {
      	  // 高亮父节点
          this.$refs['menuTree'].setCurrentKey(parentNode.id);
          // 点击父节点，定位到父节点
          this.nodeClick(parentNode)
      })
  },
  // 追加树同级节点方法
  // data当前节点数组。数组数组数组。是个数组，当前节点的数组，数组里面包含对象
  insertAfter (data) {
  	  // this.data是树形结构渲染的数组
  	  // 传过来的data是个数组, 相当于在
      this.data.push(data)
      this.$nextTick(() => {
      	  // 高亮当前节点
          this.$refs['menuTree'].setCurrentKey(data.id);
          // 点击当前节点。
          this.nodeClick(data)
      })
  },


  ------------------------------我是一条分割线--------------------------------
  自己写的方法有点麻烦。elementui提供了两个添加子节点和添加同级节点的方法超级简单，一句代码就可乐，不过要记得注意传参
  假如我有个新增方法
  add () {
  	// 1.数组逐条添加到某个节点，添加多条子节点
    // 在某个节点添加子节点
    // this.data.children为需要添加的数组
	this.needList.children.forEach(item => {
	  // item对象对象对象。
	  // _this.nodeRow点击的那条数据，也是个对象对象
	  _this.$refs['menuTree'].append(item, _this.nodeRow);
	})
	// 2.添加多条子节点
	// _this.nodeRow点击的父元素
	_this.$refs['menuTree'].append(需要添加的对象, _this.nodeRow);
	// 3.添加同级的节点
	 _this.$refs['menuTree'].insertAfter(需要添加的对象, 需要添加到谁前面的对象);
	 具体的看element官网
  }
}
删除操作：
deleteCpnDetail (parent) {
  this.data.splice(index, 1);
  这个要看具体删除哪个节点下面的数据
  1.比如我要删掉我点击的那个节点的数据, 点击数
  parent.splice(index, 1);
  2.比如我是点击父节点，在表格中删除某个子节点，先循环父节点数组，找到需要删除的是哪个节点的id，然后再删掉，最后高亮父节点
  const index = parent.children.findIndex(d => d.id === data.id);
  parent.children.splice(index, 1);
  _this.$refs['menuTree'].setCurrentKey(parent.id);
  _this.nodeClick(parent)
}

删除1.点树形结构删除的示意图

删除2，通过点父节点显示表格再删除某条的示意图

还有三个添加、删除的方法（官网）用法上面介绍了

总结到此