前端实习D21-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_73890448/article/details/140930740

分页查询

         <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] 省

数据回显：

后端拿回来省市区域码，将其合并回数组形式