项目复用组件

下拉框选择器

 <el-form-item label="收款银行">
       <el-select v-model="queryInfo.companyAccount" clearable>
             <el-option v-for="item in bankList" :key="item.id" :label="item.optText" :value="item.optValue"></el-option>
        </el-select>
</el-form-item>


数据：
bankList: []


方法：
        async getbankList() {
            const res = await this.$http.get('');
            console.log(res);
            this.bankList = res.data.data;
        },

分页表格

 <!--分页区域-->
            <!-- 分页导航区域 
            @size-change(pagesize改变时触发) 
            @current-change(页码发生改变时触发)
            :current-page(设置当前页码)
            :page-size(设置每页的数据条数)
            :total(设置总页数)-->
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pageNum" :page-sizes="[1, 5, 10, 15]" :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next" :total="total"></el-pagination>



数据：
 /* 获取查询用户信息参数 */
            queryInfo: {
                pageNum: 1,
                pageSize: 15
            },
            total: 0,
			userList :[]
方法：
  /* 页码事件 */
        /*  pagesize改变时触发，当pagesize发生改变的时候*/
        handleSizeChange(newSize) {
            //以最新的pagesize来请求数据并展示数据
            console.log(newSize);
            this.queryInfo.pageSize = newSize;
            //重新按照pagesize发送请求，请求最新的数据
            this.getRoleList();
        },
        /*  页码发生改变时触发当current发生改变的时候 */
        handleCurrentChange(current) {
            //以最新的current页码来请求数据并展示数据
            console.log(current);
            this.queryInfo.pageNum = current;
            //重新按照pagenum发送请求，请求最新的数据
            this.getRoleList();
        },

		  async getRoleList() {
            // 获取表格信息
            // console.log('获取用户信息成功');
            // console.log(this.queryInfo);
            const res = await this.$http.get('finance/paymentBill/page', { params: this.queryInfo });
            if (res.status !== 200) return this.$message.error('获取用户列表失败');
            console.log(res.data.data);
            this.total = res.data.data.total;
            this.userList = res.data.data.list;