VUE element ui tree树形控件修改功能

之前在网上很少能找到对应的方法,所以在此记录一下。

需求是点击每个选项的按钮后弹出一个input框,示例如下
VUE element ui tree树形控件修改功能_第1张图片
要想实现每行选项都加上+、-、/符号要通过自定义来实现,在这我选择renderContent方法
在这里插入图片描述

renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span>{node.label}</span>
          <span>
            <el-button size="mini" type="text" on-click={() => this.append(data)}>
              +
            </el-button>
            <el-button size="mini"type="text"on-click={() => this.remove(node, data)}>
               -
            </el-button>
            <el-button size="mini" type="text" on-click={() => this.update(node, data)} >
               /
            </el-button>
            {data.IsShow ?
            (<span><el-input placeholder='请输入内容'
                    value={"this".update_input}
                    onInput={ (a) => this.Inp(a, data) }
                    clearable>

                  </el-input>
                      <span on-click={()=>this.update_sortInfo(data)}></span>
                      <span on-click={()=>this.update(node, data)}>×</span>
                </span>) : ('')
            }
          </span>
        </span>
      );
    },
     //修改子节点
    update(node, data) {
      // 无效的写法
      // data.IsShow = !data.IsShow
      // 生效的写法
      data.IsShow = !JSON.parse(JSON.stringify(data.IsShow) )
      node.data = JSON.parse(JSON.stringify(node.data) )
    },

然后通过自定义的update的方法进行修改每行的数据,之前会失效百度了之后,说是因为虽然改变了数据的值,但是vue没见听到数据变化,视图不刷新,需要让vue监听到就好了。

你可能感兴趣的:(vue.js,ui,前端,elementui)