将element-ui table封装，和pagination封装到一起

用过antdv的table组件之后，再用element 的table实在不方便，就封装了一下，模仿antdv的使用方法，将分页组件也封入到组件中

原始用法：

缺点：有多少列就要写多少个el-table-column， 分页组件也需要每次引入，同一段代码不断的重复写

  <template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

封装之后的组件使用： 用法同antdv

<base-table
    :data="tableData"
    :stripe="true"
    :pagination="pagination"
    :table-title="tableTitle">
    <template #warnLevel="{row}">
      <span :style="{color: colorDict[row.warnLevel].color}">{{ colorDict[row.warnLevel].label }}</span>
    </template>
  </base-table>

tableTitle就是我们的所有列，该对象的所有属性同element ui 中的Table-column属性，例如：

const tableTitle = [
  {
    key: 'name',
    title: '设施名称',
    sortable: true
  },
  {
    key: 'comp',
    title: '设施类型',
    sortable: true
  },
  {
    key: 'county',
    title: '分公司',
    sortable: true
  },
  {
    key: 'town',
    title: '灾害类型',
    sortable: true
  },
  {
    key: 'town',
    title: '影响时间',
    sortable: true
  },
  {
    key: 'town',
    title: '灾害电压',
    sortable: true
  },
  {
    key: 'warnLevel',
    title: '预警等级',
    sortable: true,
    scopedSlots: { customRender: 'warnLevel' } // 个性化需要设置此字段
  }
];

下面提供一下完整的封装组件： 

<template>
  <div class="base-table-wrap">
    <el-table
      v-bind="$attrs"
      :class="[extraClass]"
      style="width: 100%"
      header-cell-class-name="jt-table-header"
      v-on="$listeners">
      <el-table-column
        v-for="(column, idx) in tableTitle"
        :key="idx"
        :label="column.title"
        :prop="column.key"
        :show-overflow-tooltip="tooltip"
        v-bind="column"
      >
        <template slot-scope="scope">
          <slot
            v-if="column.scopedSlots && column.scopedSlots.customRender"
            :name="column.scopedSlots ? column.scopedSlots.customRender : ''"
            v-bind="scope"
            v-on="$listeners"
          />
          <span v-else>{{ scope.row[column.key] }}</span>
        </template>


      </el-table-column>
    </el-table>
    <el-pagination
      v-if="pagination"
      :current-page="pagination.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pagination.limit"
      :total="pagination.total"
      background
      class="system-pagination"
      layout="prev, pager, next,sizes,jumper"
      @size-change="sizeChange"
      @current-change="pageChange"/>
  </div>


</template>

<script>
export default {
  name: 'BaseTable',
  props: {
    tableTitle: {
      type: Array,
      default: () => []
    },
    pagination: {
      type: [Object, Boolean],
      default: () => {}
    },
    sizeChange: {
      type: Function,
      default: () => {}
    },
    pageChange: {
      type: Function,
      default: () => {}
    },
    theme: {
      type: String,
      default: 'light'
    },
    tooltip: {
      type: Boolean,
      default: true
    },
    extraClass: {
      type: String,
      default: ''
    }
  }
};
</script>

<style  lang="scss">
.base-table-wrap::after {
  display: block;
  content: 'clear';
  clear: both;
  line-height: 0;
  visibility: hidden;
}
.jt-table-header {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.light {
  .el-table__header-wrapper {
    background-color: #f6f6f6;
  }
}
</style>

 

在main.js 中引入

import BaseTable from '@/components/Base/BaseTable';

Vue.component('base-table', BaseTable);

然后就可以在组件中直接<base-table/>使用了

 

注意： 使用过程中如果有什么问题可以发留言哈，如果有什么好的建议，也欢迎随便提哦