el-table 分页多选选中状态 当前页全选之后不选了数据还在
时间: 2024-01-04 10:11:45 浏览: 112
你好,针对你的问题,可以考虑使用 el-table 的 select-all 属性来解决。select-all 属性为 true 时,点击表头的多选框会选中当前页的所有数据,而不是所有数据。这样就可以避免当前页全选后,未选中数据仍然在的问题。同时,还可以使用 @select 方法来监听选中的数据,再通过操作选中的数据来达到你想要的效果。具体的实现代码可以参考以下示例:
```html
<el-table v-model="tableData" :data="tableData" :select-all="true" @select="handleSelect">
<el-table-column type="selection" width="55"></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="address" label="地址"></el-table-column>
</el-table>
```
```javascript
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, address: '北京市' },
{ name: '李四', age: 20, address: '上海市' },
{ name: '王五', age: 22, address: '广州市' },
{ name: '赵六', age: 24, address: '深圳市' },
],
};
},
methods: {
handleSelect(selection) {
console.log(selection);
// 选中的数据
},
},
};
```
希望能够帮助到你。如果还有其他问题,可以继续问我哦。
阅读全文