element ui 表格组件二次封装

<template>
  <div class="simpleTable">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        v-for="item in tableConfig"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
      >
        <template slot-scope="scope">
          <slot :scope="scope.row" :name="item.prop">
            <span>{{ scope.row[item.prop] }}</span>
          </slot>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.current"
      :limit.sync="queryParams.size"
      @pagination="getList"
    />
  </div>
</template>
<script>
/* 简易表格组件 */
export default {
  props: {
    /**
     * 表格数据
     */
    tableData: {
      type: Array,
      default: () => [],
    },
    /** 表格配置信息 */
    tableConfig: {
      type: Array,
      default: () => [],
    },
    /** 总条数 */
    total: {
      type: Number,
      default: 0,
    },
  },
  created() {},
  data() {
    return {
      queryParams: {
        current: 1,
        size: 10,
      },
    };
  },
  methods: {
    getList() {
      this.$emit("getQueryData", this.queryParams);
    },
  },
};
</script>
<style lang="scss" scoped></style>