怎么让s-table默认选中一些数据
时间: 2024-05-08 10:17:49 浏览: 187
ant design vue 表格table 默认勾选几项的操作
5星 · 资源好评率100%
您可以使用`defaultSelection`属性来设置`s-table`的默认选中数据。该属性需要传入一个数组,数组中的元素为数据的行对象,例如:
```html
<template>
<div>
<el-button type="primary" @click="setSelection">设置默认选中</el-button>
<el-button type="primary" @click="clearSelection">清空选中</el-button>
<el-table ref="table" :data="tableData" :default-selection="defaultSelection" @selection-change="handleSelectionChange">
<el-table-column type="selection"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20, gender: '男' },
{ name: '李四', age: 25, gender: '女' },
{ name: '王五', age: 30, gender: '男' },
],
defaultSelection: [],
};
},
methods: {
setSelection() {
// 设置默认选中第一行和第二行数据
this.defaultSelection = [this.tableData[0], this.tableData[1]];
},
clearSelection() {
// 清空选中数据
this.$refs.table.clearSelection();
},
handleSelectionChange(selection) {
console.log('当前选中数据:', selection);
},
},
};
</script>
```
在上面的例子中,通过点击`设置默认选中`按钮,将第一行和第二行数据设置为默认选中状态,点击`清空选中`按钮可以清空选中状态。在`s-table`中使用`default-selection`属性来设置默认选中数据,当表格渲染完成后,这些数据会被自动选中。在`selection-change`事件中可以获取当前选中的数据。
阅读全文