携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情
文章简介
本篇文章，vue中使用element的el-table组件，来实现el-table，分页选择，不仅可以选择第一页的数据，切换到第二页，也可以选择。
功能展示
如图，第一页选择四条数据，第二页选择四条数据。提示八条数据，说明可以隔页选择数据。
功能逐步实现
第一步创建一个项目
参考我的另一篇文章vue项目的创建和vue中引入element-ui或element-plus
第二步 写一个table表格
<el-table
:data="tableData"
:row-key="getRowKeys"
ref="multipleTable"
@selection-change="selectionChange"
style="width: 100%"
>
<!-- 表格增加多选框 -->
<el-table-column
type="selection"
width="55"
:reserve-selection="true"
></el-table-column>
<el-table-column prop="dataName" width="350" label="名称">
</el-table-column>
<el-table-column
prop="updateTime"
label="时间"
></el-table-column>
<el-table-column label="备注">
<template slot-scope="scope">
<el-tag disable-transitions
>{{ scope.row.describes }}
</el-tag>
</template>
</el-table-column>
</el-table>
注意：
第三步 写个分页
<el-pagination
background
class="pageRegion"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 15, 20]"
:page-size="pageSize"
layout="total, jumper, sizes,prev, pager, next"
:total="total"
>
</el-pagination>
第四步 定义参数和初始化方法
data() {
return {
// 数据导入表格
tableData: [],
// 选中的数组集合
multipleArray: [],
// 分页
currentPage: 1,
pageSize: 10,
total: 0
}
},
mounted() {
this.getDataList()
},
第五步 所有方法
// 获取数据表格列表信息
getDataList() {
this.$api.origin
.getDataList({
page: this.currentPage - 1,
size: this.pageSize,
userId: window.sessionStorage.getItem("userId")
})
.then(res => {
if (res.code === 0) {
this.total = res.result.count
this.tableData = res.result.data.content
}
})
},
// 多选框改变触发的方法
selectionChange(selection) {
this.multipleArray = selection
// console.log(this.multipleArray)
},
// 分页 单页数量改变事件
handleSizeChange(val) {
this.pageSize = val
this.currentPage = 1
this.getDataList()
},
// 分页 切换分页事件
handleCurrentChange(val) {
this.currentPage = val
this.getDataList()
},
// 数组中每个对象的id,因为id居右唯一性
getRowKeys(row) {
return row.id
}
项目的完整代码
<template>
<div class="page">
<div>
<el-table
:data="tableData"
:row-key="getRowKeys"
ref="multipleTable"
@selection-change="selectionChange"
style="width: 100%"
>
<!-- 表格增加多选框 -->
<el-table-column
type="selection"
width="55"
:reserve-selection="true"
></el-table-column>
<el-table-column prop="dataName" width="350" label="名称">
</el-table-column>
<el-table-column
prop="updateTime"
label="时间"
></el-table-column>
<el-table-column label="备注">
<template slot-scope="scope">
<el-tag disable-transitions
>{{ scope.row.describes }}
</el-tag>
</template>
</el-table-column>
</el-table>
</div>
<div style="margin-top: 10px">
<el-pagination
background
class="pageRegion"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 15, 20]"
:page-size="pageSize"
layout="total, jumper, sizes,prev, pager, next"
:total="total"
>
</el-pagination>
</div>
</div>
</template>
<script>
export default {
data() {
return {
// 数据导入表格
tableData: [],
// 选中的数组集合
multipleArray: [],
// 分页
currentPage: 1,
pageSize: 10,
total: 0
}
},
mounted() {
this.getDataList()
},
methods: {
// 获取数据表格列表信息
getDataList() {
this.$api.origin
.getDataList({
page: this.currentPage - 1,
size: this.pageSize,
userId: window.sessionStorage.getItem("userId")
})
.then(res => {
if (res.code === 0) {
this.total = res.result.count
this.tableData = res.result.data.content
}
})
},
// 多选框改变触发的方法
selectionChange(selection) {
this.multipleArray = selection
// console.log(this.multipleArray)
},
// 分页 单页数量改变事件
handleSizeChange(val) {
this.pageSize = val
this.currentPage = 1
this.getDataList()
},
// 分页 切换分页事件
handleCurrentChange(val) {
this.currentPage = val
this.getDataList()
},
// 数组中每个对象的id,因为id居右唯一性
getRowKeys(row) {
return row.id
}
}
}
</script>
<style scoped></style>
