vue 通用table组件（子组件）获取父类分页组件的currentPage和pageSize

亦凉 2021-10-13 18:48 297阅读 0赞

子组件：
    <template>
      <el-table :data="tableData" :newPage="newPage" :newPageSize="newPageSize" border>
        <el-table-column
          type="index"
          :index="indexMethod"
          width="50"
          align="center"
        ></el-table-column>
        
        <el-table-column v-for="(item,key) in tableKey"
                         :key="key"
                         :prop="item.prop"
                         :label="item.label"
                         :minWidth="item.minWidth"
                         :align="item.align"
                         :fixed="item.fixed"
        ></el-table-column>
    
      </el-table>
    
    </template>
    
    <script>
    
      export default{
    
        name: 'newTable',
    
        data(){
    
          return{
    
          }
    
        },
    
        methods: {
          //翻页修改索引
          indexMethod(index){
            return (this.newPage-1)*this.newPageSize+index+1;
          },
        },
    
        props:{
          tableKey: {
            type: Array,
            default: []
          },
          tableData: {
            type: Array,
            default: []
          },
          //newPage和newPageSize完全是为了实现自定义分页的索引
          newPage:{
            type:Number,
            default:1
          },
          newPageSize:{
            type:Number,
            default:10
          }
    
        },
    
      }
    
    </script>

父组件：

<template>
      <div>
        <newTable :tableData="tableData" :tableKey="tableKey" :newPage="newPage" :newPageSize="newPageSize" v-loading="loading" style="width: 95%;margin-top: 5px;margin-left: 25px;"></newTable>
        <div class="block" style="width: 95%;text-align: center;margin-left: 25px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="recordSize">
          </el-pagination>
        </div>
        
    </template>
    
    <script>
    
      import newTable from '../../components/newTable';
      import $ from "jquery";
      export default {
        data() {
          return {
            //table
            tableData: [],
            tableKey: [],
            loading:true,
            //pagination
            currentPage: 1,//初始化当前页码
            pageSize:10,//初始化页面显示条数
            recordSize:0,//初始化数据总数
          };
        },
    
        //页面加载完成时调用
        mounted() {
          console.log("111");
          //表格字段和样式初始化
          this.getTableKey();
          //表格数据初始化
          this.getTableData();
        },
    
        //局部注册组件
        components: {
          newTable,
        },
    
        methods:{
    
          back(){
            this.$router.go(-1);//返回上一层
          },
    
          //获取指定类型页面的字段，名称，格式等信息
          getTableKey(){
            let that = this;
            let param={
              "XX" : this.$route.query.type,
              "XX" : this.$route.query.type
            };
            $.ajax({
              async: true,
              cache: false,
              //后台用@RequestBody接收数据，如果没有contentType如下设置则会提示not support
              contentType: "application/json;charset=UTF-8",
              //对于特殊的数据做一次转义
              data:JSON.stringify(param),
              type: "POST",
              dataType: "text",
              url: "XXX",
              success: function(result) {
                that.tableKey = eval(result);
              },
              error: function(data) {
                // 请求失败
                that.$alert("Server error, please contact administrator", "", {
                  confirmButtonText: "Comfirm",
                  callback: action => {}
                });
              }
            });
          },
    
          //请求数据
          getTableData(){
            let that = this;
            that.loading = true;
            let param={
              "XX" : this.$route.query.date,
              "XX" : this.$route.query.type,
              "rows" : that.pageSize,
              "page" : that.currentPage,
            };
            $.ajax({
              async: true,
              cache: false,
              //后台用@RequestBody接收数据，如果没有contentType如下设置则会提示not support
              contentType: "application/json;charset=UTF-8",
              //对于特殊的数据做一次转义
              data:JSON.stringify(param),
              type: "POST",
              dataType: "json",
              url: "XXX",
              success: function(result) {
                that.recordSize = XXX;
                that.tableData = result;
                that.loading = false;
              },
              error: function(data) {
                that.loading = true;
                // 请求失败
                that.$alert("Server error, please contact administrator", "", {
                  confirmButtonText: "Comfirm",
                  callback: action => {}
                });
              }
            });
          },
    
          //分页
          handleSizeChange(val) {
            this.pageSize = val;
            this.newPageSize = val;
            this.getTableData();
          },
          handleCurrentChange(val) {
            this.currentPage = val;
            this.newPage = val;
            this.getTableData();
    
          }
    
        },
        beforeRouteLeave(to,from,next){
          to.meta.keepAlive = true;
          next();
        }
      };
    </script>
    
    
    <style scoped>
      .el-table th>.cell {
        text-align: center;
      }
    </style>

上面的代码因为一些原因做了处理，主要的方式就是在子组件的tabel上面绑定参数，然后在props中设置类型和初始值

在父组件中也绑定一样的参数（最好不要和其他参数有冲突）

绑定值后，在父组件中相应方法中获取值即可