Element-ui中tree设置为单选及添加/修改/删除树

2019-04-12  本文已影响0人  leesession

1、首先创建树,配置下树的参数

  <el-tree
        :data="data"
        :props="props"
        node-key="uuid"
        :check-strictly="true"
        show-checkbox
        @check-change="checkChange"
        ref="tree">
  </el-tree>

2.data中设置一些值

   data: [],
   props: {
     label: 'name',
     children: 'childList'
   },
  selectOrg: {
     orgJsn:{},//存唯一的值,勾选的
     orgsid: [],//存uuid,与node-key相结合
   }

3.设置方法:

checkChange(data, checked){
        // 获取当前选择的id在数组中的索引
        const indexs = this.selectOrg.orgsid.indexOf(data.uuid);
        // 如果不存在数组中,并且数组中已经有一个id并且checked为true的时候,代表不能再次选择。
        if (indexs < 0 && this.selectOrg.orgsid.length === 1 && checked) {
          // 设置已选择的节点为false 很重要
          this.$refs.tree.setChecked(this.selectOrg.orgJsn, false)//设置之前选中的为未选中
          this.selectOrg.orgsid = [];//清空
          this.selectOrg.orgsid.push(data.uuid);//存唯一的node-key中唯一的标致 uuid
          this.selectOrg.orgJsn=data;//存当前节点的json
          this.mainParentNode=this.$refs.tree.getNode(data)//用当前节点的值 来 获取当前节点在树中的位置,用于(增加/修改/删除)
        } else if (this.selectOrg.orgsid.length === 0 && checked) {
          // 发现数组为空 并且是已选择
          // 防止数组有值,首先清空,再push
          this.selectOrg.orgJsn=data;
          this.selectOrg.orgsid = [];
          this.selectOrg.orgsid.push(data.uuid);
          this.mainParentNode=this.$refs.tree.getNode(data);
        } else if (
          indexs >= 0 &&
          this.selectOrg.orgsid.length === 1 &&
          !checked
        ) {
          // 再次直接进行赋值为空操作
          this.selectOrg.orgsid = []
        }

4.添加树:

      //将新创建的节点压入当前节点
      if (!this.mainParentNode.data.childList) {//查询有没有 childList ,用于存子节点
         this.$set(this.mainParentNode.data, 'childList', []);//没有就添加
       }
      this.mainParentNode.data.childList.push(data);//将生成的节点 data 压入当前节点 mainParentNode 的子节点数组 childList 中

5.修改树:

      //修改相应字段,将当前的节点修改,对应修改
      this.selectOrg.orgJsn.字段名=this.mainParentNode.parent.data.字段名;//修改的节点 data.字段名

6.删除树:

      //首先找到当前节点的父节点
      const children = this.mainParentNode.parent.data.childList || this.mainParentNode.parent.data;
      //通过 循环uuid 来找到对应删除的位置
      const index = children.findIndex(d => d.uuid === this.selectOrg.orgJsn.uuid);
      //splice删除
      children.splice(index, 1);
上一篇下一篇

猜你喜欢

热点阅读