el-table 里嵌套子组件,当我点击子组件的时候,获取该el-table行的数据
时间: 2024-01-17 18:09:08 浏览: 24
在 el-table 中嵌套子组件,可以通过以下方式获取该行数据:
1. 在子组件中,触发一个事件,把该行的数据作为参数传递出去,代码如下:
```js
// 子组件代码
methods: {
handleClick() {
this.$emit('row-click', this.rowData);
}
}
```
2. 在父组件中,监听子组件触发的事件,获取该行数据,代码如下:
```html
<el-table :data="tableData">
<el-table-column label="姓名" prop="name">
<template slot-scope="scope">
<my-component :rowData="scope.row" @row-click="handleRowClick"></my-component>
</template>
</el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
</el-table>
<script>
import MyComponent from './MyComponent.vue';
export default {
components: {
MyComponent
},
methods: {
handleRowClick(rowData) {
console.log(rowData); // 输出该行数据
}
}
}
</script>
```
在这个例子中,我们在 el-table 中使用了 MyComponent 组件来展示数据,并且通过 rowData 属性将该行数据传递给子组件。在子组件中,我们通过 handleClick 方法触发了一个名为 row-click 的事件,并且将该行数据作为参数传递出去。在父组件中,我们通过 @row-click 监听子组件触发的事件,并且在事件处理函数 handleRowClick 中获取该行数据,然后进行相应的处理。