前端实习D21

分页查询

         <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博客