vue项目中点击tree组件中的数据时,添加每条数据到<Input type="textarea"" />中,每条数据独占一行
时间: 2024-03-01 18:51:00 浏览: 65
可以在tree组件的点击事件中,将点击的数据添加到一个数组中,然后在<Input type="textarea" />中使用v-for循环遍历数组,将每个数据单独占一行显示。具体实现可以参考下面的代码示例:
```
<template>
<div>
<el-tree
:data="treeData"
@node-click="handleNodeClick"
></el-tree>
<Input type="textarea" :value="textareaValue" rows="5" />
</div>
</template>
<script>
export default {
data() {
return {
treeData: [
{
label: '一级 1',
children: [
{
label: '二级 1-1',
children: [
{
label: '三级 1-1-1'
}
]
}
]
}
],
selectedData: [] // 用于存储选中的数据
}
},
computed: {
textareaValue() {
return this.selectedData.join('\n') // 将选中的数据拼接成字符串,每个数据单独占一行
}
},
methods: {
handleNodeClick(data) {
this.selectedData.push(data.label) // 将点击的数据添加到selectedData数组中
}
}
}
</script>
```
阅读全文