el-table的选择框有数据怎么自动选择
时间: 2023-09-26 14:11:34 浏览: 37
如果你想在 `el-table` 中的选择框中自动选择数据,可以使用 `v-model` 绑定一个数组来实现。你需要将每个需要选中的行的 `rowKey` 值添加到这个数组中。同时,你需要在 `el-table` 上添加 `@select` 事件监听器来处理选择事件,并在事件处理程序中更新绑定的数组。下面是一个示例:
```html
<template>
<div>
<el-table :data="tableData" @select="handleTableSelect" v-model="selectedRows">
<el-table-column type="selection"></el-table-column>
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column prop="gender" label="Gender"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: 'John', age: 25, gender: 'Male' },
{ id: 2, name: 'Jane', age: 30, gender: 'Female' },
{ id: 3, name: 'Bob', age: 20, gender: 'Male' },
{ id: 4, name: 'Alice', age: 35, gender: 'Female' },
],
selectedRows: [],
};
},
methods: {
handleTableSelect(selection) {
this.selectedRows = selection.map(item => item.id);
},
},
};
</script>
```
在上面的示例中,我们通过 `v-model` 绑定了 `selectedRows` 数组,同时在 `@select` 事件处理程序中更新了这个数组。当 `selectedRows` 数组中的值被更新时,与这些行相关联的选择框也会被选中。