vue el-tree怎样给每个节点后面添加输入框并保存
时间: 2023-05-10 18:01:12 浏览: 1030
el-tree-select:基于el-select和el-tree改造的树形选择器(下拉框)组件
Vue el-tree组件是一个支持层级树结构的组件,可以用于展示组织结构、文件目录等树型结构。给每个节点后面添加输入框的需求可能是为了让用户编辑节点的名称或其他信息。实现这个需求的步骤如下:
1. 在el-tree中的node默认插槽中添加一个输入框,如下:
```
<el-tree :data="data">
<template slot="node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<el-input v-model="node.name"></el-input>
</template>
</el-tree>
```
2. 在data中添加需要修改的节点的name属性,然后在用户编辑输入框中的内容时实时更新该节点的name属性,如下:
```
data() {
return {
data: [
{
label: '第一层',
children: [
{
label: '第二层',
children: [
{
label: '第三层',
name: '节点名称'
}
]
}
]
}
]
}
}
```
```
<el-tree :data="data">
<template slot="node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<el-input v-model="node.name"></el-input>
</template>
</el-tree>
```
3. 在用axios发送保存请求时,将修改的节点数据传给后端,让后端修改相应节点的数据,如下:
```
methods: {
saveNodeData(node) {
axios.post('/api/saveNodeData', { node }).then(res => {
console.log(res.data)
}).catch(error => {
console.log(error.response.data)
})
}
}
```
通过以上几个步骤,即可实现在el-tree中给每个节点后面添加输入框并保存数据的功能。注意,这只是实现的一个思路,具体实现还需要结合项目实际情况进行调整和优化。
阅读全文