export default { data() { return { tableData: [ { name: 'John', age: 28 }, { name: 'Mary', age: 24 }, { name: 'Bob', age: 32 } ] } }, methods: { getSelectedRows() { const table = this.$refs.table const selectedRows = table.getSelection() console.log(selectedRows) } }}
时间: 2023-12-10 16:40:13 浏览: 52
Vue 技巧之控制父类的 slot
这是一个 Vue.js 组件选中表格行的方法,`tableData` 是表格的数据源,`getSelectedRows` 是获取选中行的方法。
在模板中,可以使用 `ref` 来引用表格组件,然后在方法中使用 `getSelection()` 方法获取选中行的数据。
具体实现可以参考以下代码:
```html
<template>
<div>
<el-table ref="table" :data="tableData">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
</el-table>
<el-button @click="getSelectedRows">Get Selected Rows</el-button>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John', age: 28 },
{ name: 'Mary', age: 24 },
{ name: 'Bob', age: 32 }
]
}
},
methods: {
getSelectedRows() {
const table = this.$refs.table
const selectedRows = table.getSelection()
console.log(selectedRows)
}
}
}
</script>
```
阅读全文