elementui 组件的二次封装

在使用elementui开发过程中，在业务中表格的重复性比较多，每写一个页面都要去复制一份表格的代码这个时候就会产生大量重复的代码。但是在同一个系统中表格的样式基本上是比较固定的，而且功能也都一样。如果每个地方都复制一份相似的代码，既不利于后期的维护代码也不简洁。为此我对原组件进行了简单的二次封装

参数说明

参数	说明	类型
loading	表格的加载	Boolean
size	表格的尺寸	String
tableData	表格数据	Array
pager	分页配置	Object
columns	表头	Array
isCheckbox	是否展示复选框	Boolean
isOperate	是否展示操作列	Boolean
isPaging	是否展示分页	Boolean

table组件封装

<template>
  <div class="common-table">
    <el-table
      :data="tableData"
      border="border"
      size="mini"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      :header-cell-style="{ background: '#FAFAFA', color: '#606266' }"
    >
      <el-table-column
        v-if="isCheckbox"
        type="selection"
        width="50"/>
      <el-table-column
        v-for="(item, index) in columns"
        :key="index"
        :prop="item.filed"
        :label="item.title"
        :align="item.align ? item.align : 'center'"
        :width="item.width"
      >
        <template slot-scope="scope">
          <el-tag
            v-if="item.filed === 'status_text'"
            :type="scope.row.status | statusFilter"
          >
          {{ scope.row.status_text }}
          </el-tag>
          <p v-else>{{ scope.row[item.filed] }}</p>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" v-if="isOperate">
        <template slot-scope="scope">
          <slot :row="scope.row" :index="scope.$index"></slot>
        </template>
      </el-table-column>
      <div slot="empty">
        <span>暂无数据</span>
      </div>
    </el-table>
    <el-pagination
      style="text-align: right;margin:20px 0;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pager.currentPage"
      :page-size="pager.pageSize"
      :page-sizes="pager.pageSizes"
      :total="pager.total"
      :layout="pager.layout">
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    pager: {
      type: Object,
      default: () => {}
    },
    columns: {
      type: Array,
      default: () => []
    },
    isCheckbox: {
      type: Boolean,
      default: false
    },
    isOperate: {
      type: Boolean,
      default: false
    }
  },
  filters: {
    statusFilter (status) {
      const statusMap = {
        1: 'success',
        2: 'danger'
      }
      return statusMap[status]
    }
  },
  data () {
    return {}
  },
  created () {},
  methods: {
    handleSizeChange (val) {
      this.$emit('handleSizeChange', val)
    },
    handleCurrentChange (val) {
      this.$emit('handleCurrentChange', val)
    },
    handleSelectionChange (val) {
      this.$emit('handleSelectionChange', val)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>