美文网首页
Element-ui中tree设置为单选及添加/修改/删除树

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

作者: leesession | 来源:发表于2019-04-12 14:48 被阅读0次

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);

相关文章

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

    1、首先创建树,配置下树的参数 2.data中设置一些值 3.设置方法: 4.添加树: 5.修改树: 6.删除树:

  • 错误 area_set_shape_disabled: Can'

    在Godot中, 直接调用方法去 修改secne_tree (添加、删除子节点), 处理图形碰撞等都会造成线程...

  • mysql 用户

    添加用户 / 修改密码 删除用户 设置默认加密插件 修改远程权限

  • Centos下新建用户及修改用户目录

    添加及删除用户 添加用户 test: adduser test 修改test密码: passwd test 删除用...

  • MEGA 美化进化树

    设置参数 Tree 的相关选项(这里主要用了把树变成环形及在某些树枝lable前添加图像,后续用AI美化进化树) ...

  • ElementUI笔记

    //【树结构下拉菜单的样式修改】 //【Tree 树形控件】 1、选中样式 //【element-ui中dialo...

  • element-ui 树(tree)组件只能单选实现

    原生组件中element-ui的tree组件是没有单选这个api的,只有多选。可是很多实际项目中其实是有这样需求的...

  • elasticsearch-基本查询API语法整理

    常用查询 关闭服务 查询集群健康 修改复制分片的数量 创建索引并设置分片数 计算集群中的文档数量 添加 修改 删除...

  • 金贝软件管理员操作说明

    一、管理员角色 最高管理权限用户管理(二级用户及普通用户添加、删除,密码修改,清空错题,设置权限)内容管理(修改软...

  • 讲个故事

    添加好友 通过验证 修改备注 置顶聊天 设置背景 取消置顶 修改备注 还原背景 删除好友

网友评论

      本文标题:Element-ui中tree设置为单选及添加/修改/删除树

      本文链接:https://www.haomeiwen.com/subject/frecwqtx.html