zoukankan      html  css  js  c++  java
  • 关于elment-ui树形控件Tree的使用

    如果简单使用的tree树形控件,按照Element ui Tree 树形控件 官方文档使用即可,基本上能够完成大部分的需求。

    但是如果需要对树形结构进行额外操作,仅仅根据官方文档提供的方案的话,可能就不太够了,需要我们更深入的研究树形控件。

    关于树形结构的增删改查操作,官方提供了append和remove两个方法,可以很方便的实现添加节点和删除节点,关键还有一个重命名的操作,并没有提供直接的方法,那就需要我们去变通。

    以下提供两个方案:

    1、利用append方法

    官方说明:

      

    说提供两个参数,但是经过验证

    <el-button type="text" size="mini"  icon="el-icon-edit" @click.stop.prevent="() => append(node, data)">重命名</el-button>
    

      所以需要为当前节点进行重命名的时候,可以依赖parentNode参数,获取父节点,然后操作就类似于为当前节点添加子节点差不多了,需要注意的是:

      添加节点,是对当前节点的子节点children通过数组方法push,或者unshift;

      重命名节点,是对当前节点的父节点的子节点children通过数组方法splice替换当前节点,需要先确定当前数据在该数组中的index

    const index = children.findIndex(d => d.cId === data.cId);
    

      然后才可以 $parants.nodes.splice(i, 1, item),其实也就是在该节点的父节点中找到子节点的数组,然后确定该数据在子节点数组中的位置,修改名称,利用splice在数组中进行替换。

    2、利用getNode方法

    <el-button type="text" size="mini"  icon="el-icon-edit" @click.stop.prevent="() => renameTreeNode(data)"></el-button>
    renameTreeNode(data){
          this.$prompt('', '通过getNode分组重命名', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputValue: data.name,
            inputValidator: function(val){
             return val.trim() != "" ? true : "分组名称不能为空";
            },
            inputPlaceholder:"请输入重命名组名称"
          }).then(({ value }) => {
            let dataNode = this.$refs.tree.getNode(data.cId);
            this.$set(dataNode.data, "name", value)
          })
        }
    

      其实关键点在于  let dataNode = this.$refs.tree.getNode(data.cId);获取到当前树节点之后,也就是设置其name值了,反倒没有什么好说的了。

      通过上述两种方案,其实可以看出来,必然还有其他方案可以实现。

      主要明白elment-ui官方文档上面关于方法和Events怎么使用,基本上能够玩出各种花样来的。

      Events也就是在template上面可以使用v-on绑定的,与click之类的使用方法一致,而方法,事实上也就是@click=“getData”这里面的getData,但是除了这种调用该方法的方案外,还可以通过this.$refs[refName].getData()的方法在javascript中调用。

      

      

  • 相关阅读:
    react获取ref的几种形式
    vue与react的小区别
    vue当中计算属性重新计算依赖关系
    移动端常见问题
    WX小程序--开发中相关问题记录
    ECMAScript6 入门 Set 和Map结构
    ECMAScript6 入门 Class 的基本语法与继承
    ECMAScript6 入门 Generator
    ECMAScript6 入门 Promise
    ECMAScript6 入门 Symbol
  • 原文地址:https://www.cnblogs.com/zhuhuoxingguang/p/9414517.html
Copyright © 2011-2022 走看看