子组件是个tree树结构加input,当我点击完树把点击值传到该行的数据中(el-table有多个子组件)
时间: 2024-02-16 17:05:09 浏览: 108
如果你的 el-table 中有多个子组件,而你需要在其中一个子组件中点击树节点后将值传递到该行数据中,可以按照以下步骤操作:
1. 在你的子组件中,首先定义一个方法,用于处理树节点的点击事件,并将选中的值传递出去。代码如下:
```js
methods: {
handleNodeClick(data) {
this.$emit('node-click', data);
}
}
```
2. 在 el-table 的模板中,将你的子组件作为 el-table-column 的 slot,同时绑定 node-click 事件。代码如下:
```html
<el-table :data="tableData">
<el-table-column label="姓名" prop="name">
<template slot-scope="scope">
<my-component :data="scope.row" @node-click="handleNodeClick"></my-component>
</template>
</el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
</el-table>
```
在这个例子中,我们将 MyComponent 作为 el-table-column 的 slot,同时将该行数据 scope.row 传递给子组件。在子组件中,我们通过 handleNodeClick 方法触发一个名为 node-click 的事件,并将选中的值作为参数传递出去。
3. 在父组件中,监听 node-click 事件,并将选中的值添加到该行数据中。代码如下:
```html
<my-component :data="rowData" @node-click="handleNodeClick"></my-component>
<script>
export default {
data() {
return {
rowData: [
{ name: '张三', age: 18, treeData: '' },
{ name: '李四', age: 20, treeData: '' },
{ name: '王五', age: 22, treeData: '' }
]
}
},
methods: {
handleNodeClick(data) {
const row = this.rowData.find(item => item.name === data.name);
row.treeData = data.value;
}
}
}
</script>
```
在这个例子中,我们在父组件中定义了一个名为 rowData 的数组,其中每一项都是一个包含 name、age、treeData 三个属性的对象。当子组件中触发了 node-click 事件后,我们在父组件的 handleNodeClick 方法中找到该行数据,并将选中的值添加到 treeData 属性中。
综上所述,通过以上操作,你就可以在子组件中点击树节点后,将选中的值添加到该行数据中了。
阅读全文