vueel-tree怎样给每个节点后面添加输入框并保存

vueel-tree怎样给每个节点后面添加输入框并保存,第1张

Vueel-tree可以使用自定义渲染来实现每个节点后面添加输入框并保存的功能,具体步骤如下:

1. 在Vueel-tree组件中添加render属性,用于渲染树节点:

<el-tree :data="data" :render-content="renderContent"></el-tree>

2. 在methods中定义renderContent函数,用于渲染树节点:

methods: { renderContent(h, { node, data }) { return h('span', [ h('span', node.label), h('el-input', { props: { value: data.inputValue }, on: { input: val =>{ data.inputValue = val } } }) ]) } }

3. 在data中定义inputValue,用于保存输入框的值:

data() { return { data: [], inputValue: '' } }

4. 在Vueel-tree组件中添加node-key属性,用于设置节点的key值:

<el-tree :data="data" :render-content="renderContent" node-key="id"></el-tree>

5. 在data中定义id,用于设置节点的key值:

data() { return { data: [ { id: 1, label: 'node1' }, { id: 2, label: 'node2' } ], inputValue: '' } }

这样,就可以在Vueel-tree组件中实现每个节点后面添加输入框并保存的功能了。

1 可能存在已勾选项的子节点或父节点

2 VueTree组件的勾选规则是父节点勾选,则其所有子节点也会被勾选;反之,如果子节点全部勾选,则其父节点也会被勾选。

因此,如果已经勾选了一个父节点或子节点,再去勾选其子节点或父节点是无效的。

3 如果需要重新勾选,可以先取消已勾选的父节点或子节点,再勾选目标节点即可。

另外,VueTree组件还提供了一些API方法,可以通过编程方式改变节点的勾选状态。

能。tree组件是一种树形组件,可以通过垂直形式一级级展开数据。tree组件能绑定v-model。tree组件往往用于数据或目录的导航。v-model就是vue的双向绑定的指令,能将页面上控件输入的值同步更新到相关绑定的data属性,也会在更新data绑定属性时候,更新页面上输入控件的值。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11630292.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-17
下一篇 2023-05-17

发表评论

登录后才能评论

评论列表(0条)

保存