elementui 组件的二次封装

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

参数说明

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>