之前在网上很少能找到对应的方法,所以在此记录一下。
需求是点击每个选项的按钮后弹出一个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监听到就好了。