vue elemetui表格和分页器的封装

话不多说，直接上代码

封装组件 BaseTable.vue

<script>
const PageSizes = [10, 20, 30, 40]; // 分页器分段设置
export default {
    props: {
      pageOpt: { // 分页器字段配置
        type: Object,
        default: ()=>({
          pageIndex: 'pageIndex',
          pageSize: 'pageSize'
        })
      },
      noGet: { // 初始化的是否不发请求
        type: Boolean,
        default: false
      },
      tableHeader: { // 表格标题
        type: Array,
        default: ()=>[]
      },
      getData: { // 获取数据方法
        type: Function,
        default: ()=>{}
      },
      data: { // 表格数据
        type: Array,
        default: ()=>[]
      },
      total: { // 数据总数
        type: Number,
        default: 0
      },
    },
    data() {
        return {
          pageIndex: 1,
          pageSize: 10,
        };
    },
    render(){
      return <div class="table-wrap">
        <div class="table-inner">
            <el-table data={this.data} style="width: 100%"  on-selection-change={val=>{this.$emit('selection-change',val)}}>
              <el-table-column type="selection" width="30" align="center"></el-table-column>
              <el-table-column type="index" width="55" label="序号" index={(index)=>{return (index+1) + (this.pageIndex-1)*this.pageSize}}></el-table-column>
              {this.tableHeader.map(i=>{
                  if(i.slots){
                    return this.$slots[i.slots]
                  }else {
                    return <el-table-column
                        label={i.label}
                        width={i.width}
                        prop={i.prop}
                        key={i.prop}
                        show-overflow-tooltip
                    ></el-table-column>
                  }
                    
              })}
            </el-table>
            {
              this.total?
                <el-pagination
                  on-size-change={this.onSizeChange}
                  class="pagination"
                  on-current-change={this.onCurrentChange}
                  page-sizes={PageSizes}
                  page-size={this.pageSize}
                  layout="total, sizes, prev, pager, next, jumper,slot"
                  total={this.total}
                >
              </el-pagination>: ''
            }
        </div>
      </div>
    },
    methods: {
      /**
       * @description: 每页条数发生变化
       * @param {*} num 每页显示条数
       */      
      onSizeChange(num){
        console.log("num1",num)
        this.pageSize = num;
        this.pageIndex = 1;
        this.getTableData();
      },
      /**
       * @description: 页码数发生变化
       * @param {*} num 当前是第几页
       */      
      onCurrentChange(num){
        this.pageIndex = num;
        this.getTableData();
      },
      /**
       * @description: 获取表格数据
       */      
      getTableData (){
        const pageOpt = {
          [this.pageOpt['pageIndex']]: this.pageIndex,
          [this.pageOpt['pageSize']]: this.pageSize
        };
        this.getData(pageOpt);
      }
    },
    created() {
      !this.noGet && this.getTableData();
    },
};
</script>
<style lang='scss' scoped>
.table-wrap {
    flex: 1;
    height: 0;
    overflow-y: auto;
    position: relative;
    border: 1px solid #EBEEF5;
    .table-inner {
        position: absolute;
        width: 100%;
        height: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    ::v-deep .el-table th{
      padding: 9px 0;
      color: #000;
      font-size: 14px;
      font-weight: 400;
    }
}
</style>

组件使用

                <BaseTable
                    :data="tableData"
                    :tableHeader="tableHeader"
                    :getData="getData"
                    @selection-change="handleSelectionChange"
                    :total="dataTotal"
                >
                    <template slot="edit">
                        <el-table-column label="操作" align="center" width="80">
                            <template slot-scope="scope">
                                <span class="details-btn" @click.stop="clickDetails(scope.row)">详情</span>
                            </template>
                        </el-table-column>
                    </template>
                </BaseTable>

    data() {
        return {
            tableHeader: [
                {
                    label: "用户名",
                    width: "",
                    prop: "accountName",
                },
                {
                    label: "账号",
                    width: "",
                    prop: "userName",
                },
                {
                    label: "所属机构",
                    width: "",
                    prop: "userTel",
                },
                {
                    label: "所属部门",
                    width: "",
                    prop: "role.roleName",
                },
                {
                    label: "角色",
                    width: "",
                    prop: "dept.depName",
                },
                {
                    label: "创建时间",
                    width: "",
                    prop: "createTime",
                },
                {
                    label: "操作",
                    width: "",
                    slots: "edit",
                }
            ],
            tableData: [],
        };
    },