记录element-ui分页与复选框出现的问题
element-ui 分页
先把官网地址放上来:https://element.eleme.cn/#/zh-CN/component/pagination.
如果是单纯在一个表格使用分页组件的话是没有问题的,element的分页组件使用起来十分简便,可以省很多事情。
代码如下:
<!--分页-->
<el-pagination
@size-change="handleSizeChange" //分页组件每页条数发生改变时触发
@current-change="handleCurrentChange" //当前页数发生改变时触发
:current-page="currentPage" //当前页数
:page-sizes="pageSizes" //总的每页条数
:page-size="pageSize" //当前每页条数
layout="total, sizes, prev, pager, next, jumper"
:total="totalNum"> //一共的数据量
</el-pagination>
总的数据:
data () {
return {
tableData: [],
// 默认显示第几页
currentPage: 1,
// 个数选择器(可修改)
pageSizes: [10, 25, 50, 100],
// 默认每页显示的条数(可修改)
pageSize: 10,
total: 0
}
},
添加后只要实现两个方法:
handleSizeChange(val) {
this.pageSize = val
console.log(`每页 ${val} 条`)
},
handleCurrentChange(val) {
this.currentPage = val
console.log(`当前页: ${val}`);
}
然后在表格:
<el-table
ref="multipleTable"
:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" //这里插入数据
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
tableData是通过axios获取的总的表格数据。
以上就是简单的分页的实现了。
element-ui 表格复选框
官网地址: https://element.eleme.cn/#/zh-CN/component/table.
这里说一下表格的复选框,复选框其实比分页使用起来更加简单,这里是官网的代码。
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column> //主要就是添加这个column值
</el-table>
添加了上面的值,这一列就出现复选框了,然后是handleSelectionChange
方法:
handleSelectionChange (val) {
// 所有选中列的信息集合
this.multipleSelection = val
console.log(this.multipleSelection)
}
该方法会把选中复选框的行的所有信息存入multipleSelection
数组中。
主要问题
原来准备实现一个功能大致是点击删除按钮删除复选框选中的行,如果是这样也不会出现问题,但是我准备给button一个:disabled
值,如果没有复选框被选中就无法点击,结果设置以后就出现复选框无法选中,控制台回馈的信息是handleSelectionChange
执行了两次,选中然后又自动取消了,最后发现是tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)
这句话和复选框起冲突了,也就是说分页功能只能靠sql分页语句而不能在前端 。
解决问题
复选框不变,还是那样,只不过分页语句通过后端完成,主要代码:
表格:
<el-table
ref="multipleTable"
tooltip-effect="dark"
:data="tableData"
v-loading="loading"
@selection-change="handleSelectionChange"
:row-key="getRowKeys"
border
style="width: 100%">
<!--复选框-->
<el-table-column type="selection" width="45"></el-table-column>
created () {
this.getUsers()
this.showTable(this.currentPage, this.pageSize)
},
methods: {
//获取数据总数
getUsers () {
var that = this
this.$ajax({
method: 'post',
url: this.apiUrl + 'userInfo/userCount'
}).then(function (response) {
that.totalNum = response.data
console.log(response.data)
})
},
//获取分页后的数据
showTable (currentPage, pageSize) {
this.loading = true
let data = {
currentPage: currentPage,
pageSize: pageSize
}
this.$ajax({
method: 'POST',
url: this.apiUrl + 'userInfo/getByPage',
data: this.$qs.stringify(data)
}).then(result => {
this.loading = false
this.tableData = result.data
})
},
// 分页
// 初始页currentPage、初始每页数据数pagesize和数据data
handleSizeChange: function (size) {
this.pageSize = size
console.log(this.pageSize) // 每页下拉显示数据
this.showTable(this.currentPage, this.pageSize)
},
handleCurrentChange: function (currentPage) {
this.currentPage = currentPage
console.log(this.currentPage) // 点击第几页
this.showTable(this.currentPage, this.pageSize)
}
}
service层:
@Override
public List<UserInfo> selectByPage(Integer currentPage, Integer pageSize) {
int cur = (currentPage-1)*pageSize;
return userInfoMapper.selectByPage(cur,pageSize);
}
sql语句
<select id="selectByPage" parameterType="Integer" resultMap="BaseResultMap">
select * from user_info
limit #{currentPage} , #{pageSize}
</select>
OK,大功告成!