el-table封装组件化，混入动态查询条件以及分页功能

不大喜欢废话，我喜欢直接上代码，代码上有注释，有问题直接，评论，我看到就修改，谢谢各位大佬指教，我开始怼代码了哈哈哈

这是子组件

<template>
  <div>
    <!--  动态查询条件   -->
    <el-form v-if="tableConfig.searchForm" inline ref="form" :model="tableConfig.searchParams">
      <el-form-item v-for="item in tableConfig.formItem" :key="item.prop" :label="item.label" :prop="item.prop" :rules="item.rules">
        <!-- Input-->
        <el-input v-if="item.type === 'Input'" v-model.trim="tableConfig.searchParams[item.prop]" :placeholder="item.placeholder" :style="{width: item.width}" :disabled="item.disabled"></el-input>
        <!-- Select-->
        <el-select filterable v-if="item.type === 'Select'" v-model.trim="tableConfig.searchParams[item.prop]" :placeholder="item.placeholder" :style="{width: item.width}" :disabled="item.disabled">
          <el-option v-for="selectItem in item.options" :key="selectItem.value || selectItem[item.selectVlaue]" :value="selectItem.value || selectItem[item.selectVlaue]" :label="selectItem.label || selectItem[item.selectLabel]"></el-option>
        </el-select>
      </el-form-item>
      <!-- 按钮 -->
      <el-form-item>
        <el-button :disabled="loadingTable" type="primary" @click="search(tableConfig.searchParams)">查询</el-button>
        <el-button :disabled="loadingTable" type="warning" @click="reset" v-if="tableConfig.formConfig.resetButton">重置</el-button>
        <template v-for="item in tableConfig.formHandler">
          <el-button :disabled="loadingTable" v-if="item.element === 'link'" :key="item.key" :type="item.type">
            <router-link  :to="item.router" >
              <span class="color-white">{{ item.label }}</span>
            </router-link>
          </el-button>
          <el-button :disabled="loadingTable" v-if="item.element === 'button'" :key="item.key" :type="item.type" @click="item.handler(item)">
            {{ item.label }}
          </el-button>
        </template>
      </el-form-item>
    </el-form>
    <!-- 插槽可以引入别的组件或者DOM   -->
    <slot name="content"></slot>
    <!--  动态渲染表格  -->
    <el-table
      ref="table"
      v-loading="loadingTable"
      element-loading-text="加载中..."
      :data="tableData"
      border
      fit
      style="width: 100%"
      :height="tableHeight"
      @selection-change="handleSelectionChange"
      :header-cell-style="{'text-align':'center'}"
      :cell-style="{'text-align':'center'}"
    >
      <el-table-column v-if="tableConfig.checkbox" type="selection" width="40"></el-table-column>
      <template v-for="item in tableConfig.thead">
        <!--操作 -->
        <el-table-column align="center" v-if="item.type === 'operation'" :key="item.prop" :prop="item.prop" :label="item.label" :width="item.width">
          <template slot-scope="scope">
            <!--按钮组-->
            <template v-if="item.buttonGroup && item.buttonGroup.length > 0">
              <template v-for="button in item.buttonGroup">
                <!-- 事件 -->
                <el-button
                  v-if="button.event === 'button'"
                  :type="button.type"
                  :key="button.id"
                  style="margin: 0 5px"
                  @click="button.handler(scope.row)" size="small">
                  {{ button.label }}
                </el-button>
                <!-- 路由跳转 -->
                <router-link v-if="button.event === 'link'" :key="button.id" :to="{name: button.name, query: { [button.key]: scope.row[button.value || 'id'] }}" class="mr-10">
                  <el-button style="margin: 0 5px" :type="button.type" size="small">{{ button.label }}</el-button>
                </router-link>
              </template>
            </template>
            <!--额外-->
            <slot v-if="item.slotName" :name="item.slotName" :data="scope.row"></slot>
            <!--删除-->
<!--            <el-button size="small" v-if="item.default && item.default.deleteButton" :loading="scope.row[item.default.deleteKey || 'id'] == rowId" @click="delConfirm(scope.row[item.default.deleteKey || 'id'])">删除</el-button>-->
          </template>
        </el-table-column>
        <!-- 纯文本渲染 -->
        <el-table-column v-else :prop="item.prop" :label="item.label"></el-table-column>
      </template>
    </el-table>
    <!--  分页  -->
    <el-row class="padding-top-30">
      <el-col :span="24">
        <el-pagination
          v-if="tableConfig.pagination"
          class="rightClass"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="tableConfig.searchParams.pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name:'PubTable',
  props: {
    tableConfig: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      tableHeight:50,
      loadingTable:false,
      tableData: [
        {itemName:'123',fullPrice:'281'},
        {itemName:'456',fullPrice:'281'},
        {itemName:'789',fullPrice:'281'}
      ]
    }
  },
  mounted:function(){
    /* 计算表格高度 */
    this.$nextTick(function () {
      this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 170;
      let self = this;
      window.onresize = function() {
        self.tableHeight = window.innerHeight - self.$refs.table.$el.offsetTop - 170
      }
    })
  },
  methods: {
    /* 搜索 */
    search(val){
      this.$emit("search",val)
    },
    /* 重置 */
    reset(){
      this.$refs.form.resetFields();
    },
    /* 页码 */
    handleSizeChange(val){
      this.tableConfig.searchParams.pageSize = val;
      this.initConfig();
    },
    handleCurrentChange(val){
      this.tableConfig.searchParams.pageIndex = val;
      this.initConfig();
    },
    /* 表格复选框事件 */
    handleSelectionChange(val){
      this.$emit("handleSelectionChange",val)
    },
    /* 初始化表格数据 */
    initConfig() {
      this.loadingTable = true;
      setTimeout(()=>{
        this.loadingTable = false
      },3000)
    },
  },
  watch: {
    tableConfig: {
      handler() {
        this.initConfig()
      },
      immediate: true
    }
  }
}
</script>
<style scoped lang="scss">
.padding-top-30{
  padding-top: 30px;
}
.rightClass{
  float: right;
}
</style>

这是父组件

<template>
  <div class="app-container">
    <pub-table
      :tableConfig="tableConfig"
      @search="search($event)"
      @handleSelectionChange = "handleSelectionChange($event)"
    ></pub-table>
  </div>
</template>

<script>
import PubTable from '@/components/PubTable'

export default {
  name: 'DynamicTable',
  components: { PubTable },
  data() {
    return {
      tableConfig: {
        pagination: true, //是否显示分页组件
        thead: [
          {
            label:'项目名称',
            prop:'itemName'
          },
          {
            label:'项目原价',
            prop:'fullPrice'
          },
          {
            label:'项目执行价',
            prop:'exePrice'
          },
          {
            label: "操作",
            type: "operation",
            width: 300,
            default: {
              deleteButton: true,
              editButton: true,
              editButtonLink: "CarsAdd"
            },
            buttonGroup: [
              { label: "编辑", type: "primary", event: "link", name: "CarsAdd", key: "id", value: "id"},
              { label: "删除", type: "danger", event: "button", handler: (data) => this.del(data) },
            ]
          }
        ], //表头数据
        checkbox: true, // 是否需要复选框
        url: '', // 请求地址
        searchParams: {
          input:"",
          parkingType:"",
          status:"",
          pageSize: 10,
          pageIndex: 1
        }, // 请求参数
        searchForm:  true, // 是否展示动态查询条件
        formItem: [
          { prop:'input', type: "Input" ,placeholder:'请输入'},
          {
            label: "类型",
            prop: "parkingType",
            selectVlaue:"value",
            selectLabel:"label",
            type: "Select",
            width: '120px',
            options: [],
            placeholder:'请选择数据'
          },
          {
            label: "禁启用",
            prop: "status",
            selectVlaue:"value",
            selectLabel:"label",
            type: "Select",
            width: '120px',
            options: [],
            placeholder:'是否禁用'
          }
        ],
        // 顶部操作按钮
        formHandler: [],
        // 是否重置
        formConfig: {
          resetButton: true
        }
      },
      selectTableList:[]
    }
  },
  created(){
    this.tableConfig.formItem[1].options = [
      {
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }
    ]
    this.tableConfig.formItem[2].options = [
      {
        value: 'Chengdu',
        label: '成都'
      }, {
        value: 'Shenzhen',
        label: '深圳'
      }, {
        value: 'Guangzhou',
        label: '广州'
      }, {
        value: 'Dalian',
        label: '大连'
      }
    ]
  },
  methods:{
    /* 查询 */
    search(data){
      console.log(data)
    },
    /* 表格行操作列 */
    del(data){
      console.log(data)
    },
    handleSelectionChange(data){
      console.log(data)
      this.selectTableList = data;
    }
  }
}
</script>
<style scoped >

</style>

效果图如下