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

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

需求是点击每个选项的按钮后弹出一个input框，示例如下

要想实现每行选项都加上+、-、/符号要通过自定义来实现，在这我选择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监听到就好了。