element-ui table组件二次封装(包含分页，多选、查询、重置)

<template>
  <div class="table-box">
    <div class="table-search">
      <el-form ref="form" :inline="true" :model="formData" label-width="80px">
        <el-form-item
          v-for="(item, inx) in formList"
          :key="inx"
          size="small"
          :label="item.label"
          :label-width="item.labelWidth || '68px'"
        >
          <el-input
            v-if="item.type==='input'"
            v-model="formData[item.prop]"
            clearable
            :placeholder="item.placeholder"
          />
          <el-select
            v-else-if="item.type==='select'"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
          >
            <el-option
              v-for="el in item.options"
              :key="el.value"
              :label="el.label"
              :value="el.value"
            />
          </el-select>
          <el-date-picker
            v-else-if="item.type==='time'"
            v-model="formData[item.prop]"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
          <el-cascader
            v-else-if="item.type==='cascader'"
            v-model="formData[item.prop]"
            filterable
            clearable
            check-strictly
            :options="regionTree"
            :props="{
              label: 'name',
              value: 'id',
              emitPath: false,
              checkStrictly: true
            }"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
          >搜索</el-button>
          <el-button
            icon="el-icon-refresh"
            size="mini"
            @click="resetQuery"
          >重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <slot name="operations" />
    <div class="table-content">
      <el-table
        ref="table"
        v-loading="loading"
        :data="tableList"
        tooltip-effect="dark"
        style="width: 100%"
        height="calc(100vh - 280px)"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          v-if="isShowSelect"
          type="selection"
          width="55"
        />
        <el-table-column
          v-for="(item, index) in header"
          :key="index"
          align="center"
          :label="item.label"
          :width="item.width"
          :prop="item.prop"
        />
        <el-table-column
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              v-for="(item, index) in operations"
              :key="index"
              :style="{color: item.color || none}"
              size="mini"
              type="text"
              :icon="item.icon"
              @click="item.handler(scope.row)"
            >{{ item.name }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-content">
      <el-pagination
        background
        :current-page.sync="pageInfo.currentPage"
        :page-size.sync="pageInfo.pageSize"
        :page-sizes="pageSizes"
        :pager-count="pagerCount"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
        v-bind="$attrs"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
/*
  组件传参：
    header: 表头
    tabList: 数据列表
    operations: 表格操作
    isShowSelect: 是否有选择功能
    pageInfo: 分页配置
    loading: loading
    formList: 搜索表单

  分页抛出事件：pagination
  多选抛出事件：selectChange
  搜索抛出事件：handleSearch
  重置抛出事件：resetQuery
*/
export default {
  props: {
    // 表头
    header: {
      type: Array,
      default() {
        return [];
      }
    },
    // 表格数据列表
    /*
      {
        lable,
        width,
        prop
      }
    */
    tableList: {
      type: Array,
      default() {
        return [];
      }
    },
    // 操作
    /*
      {
        name: "删除",
        icon: "el-icon-delete",
        color: "red",
        handler: this.handleDelate
      }
    */
    operations: {
      type: Array,
      default() {
        return [];
      }
    },
    // 是否显示选择框
    isShowSelect: {
      type: Boolean,
      default: () => false
    },
    // 分页
    /*
      {
        currentPage //当前页
        pageSize // 每页条数
        total // 总数量
      }
     */
    pageInfo: {
      type: Object,
      default: () => {}
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    // 搜索条件
    /*
        {
            type, 类型---input, select, time, cascader区域
            label, 名称
            prop, 绑定属性
            placeholder,
            labelWidth, 名称宽度
            option --- select类型需要
            regionTree --- cascader类型需要
        }
    */
    formList: {
      type: Array,
      default: () => {}
    }
  },
  data() {
    return {
      pagerCount: 5,
      pageSizes: [10, 20, 30, 50],
      formData: {}
    };
  },
  computed: {
  },
  created() {
  },
  methods: {
    // 每页数量发生改变
    handleSizeChange(val) {
      if (this.pageInfo.currentPage * val > this.pageInfo.total) {
        this.$emit("pagination", { page: 1, pageSize: val });
      } else {
        this.$emit("pagination", { page: this.pageInfo.currentPage, pageSize: val });
      }
    },
    // 页码改变
    handleCurrentChange(val) {
      this.$emit("pagination", { page: val, pageSize: this.pageInfo.pageSize });
    },
    // 多选
    handleSelectionChange(val) {
      this.$emit("selectChange", val);
    },
    // 搜索
    handleQuery() {
      this.$emit("handleSearch", this.formData);
    },
    // 重置
    resetQuery() {
      this.$emit("handleReset");
    }
  }
};
</script>

<style lang="scss" scoped>
.table-box {
  .pagination-content {
    display: flex;
    flex-direction: row-reverse;
    padding-top: 20px;
  }
}
</style>