element-ui中table组件的scope.row可以传给兄弟组件吗
时间: 2023-11-19 11:05:58 浏览: 86
基于Vue+element-ui 的Table二次封装的实现
可以的。你可以在父组件中定义一个变量,然后将scope.row赋值给该变量。接着将该变量传递给兄弟组件即可。具体操作可以参考以下代码示例:
父组件中定义变量并将scope.row赋值给该变量:
```
<template>
<div>
<el-table :data="tableData" @row-click="handleRowClick">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column prop="sex" label="Sex"></el-table-column>
</el-table>
<sibling-component :rowData="rowData"></sibling-component>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John', age: 20, sex: 'male' },
{ name: 'Jane', age: 25, sex: 'female' },
{ name: 'Tom', age: 30, sex: 'male' }
],
rowData: null
}
},
methods: {
handleRowClick(row, column, event) {
this.rowData = row;
}
}
}
</script>
```
在兄弟组件中接收传递过来的rowData变量:
```
<template>
<div>
<p>Selected Row:</p>
<p>Name: {{ rowData.name }}</p>
<p>Age: {{ rowData.age }}</p>
<p>Sex: {{ rowData.sex }}</p>
</div>
</template>
<script>
export default {
props: ['rowData']
}
</script>
```
这样就可以将table中点击的行数据传递给兄弟组件了。
阅读全文