分页查询
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageParams.currentPage"
:page-size="pageParams.pageSize"
:page-sizes="[5,10,20,30,40,50]"
layout="->,total, sizes, prev, pager, next, jumper"
:total="pageParams.total">
</el-pagination>
pageParams: {
total: 0,
currentPage: 1,
pageSize: 10,
},
之前使用传一个很大的值去获取所有数据,现每次调用获取数据的接口时传入pageSize,currentPage
getHolidayMsgList({year:this.searchYear,distributorId:0,reasonable:true,pageNum: 1,pageSize: 999})
searchList({name:this.searchName,distributorId:0,reasonable:true,pageNum: this.pageParams.currentPage,pageSize: this.pageParams.pageSize}).then((response) => {}
表单无需再使用slice(),否则会出现无论转变哪种页面大小都只能显示第一页
:data="tableData.slice((pageParams.currentPage-1)*pageParams.pageSize,pageParams.currentPage*pageParams.pageSize)"
<el-table :data="dataList" border table-layout='fixed' size="mini">
注意这两个函数,当pageSize,currentPage发生变化,要重新调用获取数据
handleSizeChange(val) {
this.pageParams.pageSize = val;
this.searchList()
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
this.pageParams.currentPage= val
this.searchList()
console.log(`当前页: ${val}`);
},
分页靠右下角:
->后的元素会靠右显示
,也就是说这个箭头符放在哪的前面,那后面的元素就会靠右
,想要所有元素靠右的话,就将它放在最前面
layout="->,total, sizes, prev, pager, next, jumper"
省市区三级级联选择器
安装中国数据,导入
npm install element-china-area-data -S
import { regionData } from 'element-china-area-data'
data(){
return{
optionsnative_place :regionData,}
}
<el-form-item label="省市区" prop="addressOption">
<el-cascader v-model="form.addressOption" :options="optionsnative_place" placeholder="请选择省市区" style="display: block;" :disabled="showDetail"/>
</el-form-item>
表单数据提交,将其拆分
this.form.districtCode=this.form.addressOption[2] 区
this.form.cityCode=this.form.addressOption[1] 市
this.form.provinceCode=this.form.addressOption[0] 省
数据回显:
后端拿回来省市区域码,将其合并回数组形式
this.form.addressOption=[item.data.provinceCode,item.data.cityCode,item.data.districtCode],
它的必填校验似乎只在新增时生效 ,回显表单时不生效,尝试了自定义校验,当数组里都为null,但似乎没用el-cascader回显表单验证不生效_表单校验type: 'array'不生效-CSDN博客