el-table分页多选
时间: 2023-11-11 21:59:58 浏览: 53
可以通过在 el-table 中使用 selection-change 事件来监听多选框的变化,然后将选中的数据存储在一个数组中。同时,可以通过设置 el-pagination 的 page-size 属性来控制每页显示的数据量,从而实现分页效果。
示例代码如下:
```html
<template>
<div>
<el-table :data="tableData" @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="address" label="地址"></el-table-column>
</el-table>
<el-pagination
:page-size="pageSize"
:total="tableData.length"
@current-change="handleCurrentChange"
></el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, address: '北京市' },
{ name: '李四', age: 20, address: '上海市' },
{ name: '王五', age: 22, address: '广州市' },
{ name: '赵六', age: 24, address: '深圳市' },
{ name: '钱七', age: 26, address: '成都市' },
{ name: '孙八', age: 28, address: '重庆市' },
{ name: '周九', age: 30, address: '天津市' },
{ name: '吴十', age: 32, address: '南京市' },
],
pageSize: 3,
currentPage: 1,
selectedData: [],
};
},
methods: {
handleSelectionChange(val) {
this.selectedData = val; },
handleCurrentChange(val) {
this.currentPage = val;
},
},
};
</script>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)