vue组件封装——公用基础table组件

ui框架用的element-ui；vue版本为vue2（2.5.17）

baseTable组件
table+pagination

<template>
  <div class="table-container">
    <!-- 表格 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-class-name="headerBg ? 'headerCell' : ''"
      :row-key="rowKey"
      @selection-change="handleSelectionChange"
      :stripe="stripe"
      :max-height="maxHeight"
      :show-summary="summary"
      :border="border"
      :size="size"
      :summary-method="summaryMethod"
      :span-method="spanMethod"
    >
      <!-- 展开行 -->
      <el-table-column v-if="expand" type="expand" width="70" align="center">
        <template slot-scope="scope">
          <!-- 作用域插槽， scope：拿到这一行的数据-->
          <slot name="expand" :row="scope.row" :index="scope.$index" :column="scope.column"> </slot>
        </template>
      </el-table-column>
      <!-- 多选 -->
      <el-table-column
        v-if="selection"
        type="selection"
        width="70"
        align="center"
        :selectable="selectBox"
      />
      <!-- 序列号 -->
      <el-table-column v-if="index" type="index" width="70" :label="indexLabel" align="center" />
      <!-- 数据 -->
      <el-table-column
        v-for="column in columns"
        :prop="column.prop"
        :label="column.label"
        :width="column.width || 'auto'"
        :key="column.prop"
        :show-overflow-tooltip="column.tooltip ? true : column.tooltip"
        :type="column.type || ''"
        :sortable="column.sortable || false"
        :fixed="column.prop == 'operation' ? 'right' : column.fixed || false"
        :align="column.prop == 'operation' ? 'left' : column.align || 'center'"
      >
        <!-- table自带的作用域插槽 -->
        <template slot-scope="scope">
          <!-- 作用域插槽， scope：拿到这一行的数据-->
          <slot :name="column.prop" :row="scope.row" :index="scope.$index" :column="scope.column">
            <!-- 默认显示 -->
            <span>{{ scope.row[column.prop] }}</span>
          </slot>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <template v-if="hasPage">
      <el-pagination
        align="left"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.pageNo"
        :page-sizes="[20, 50, 100]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      >
      </el-pagination>
    </template>
  </div>
</template>
<script>
export default {
  props: {
    columns: {
      //表格column配置项
      type: Array,
      default: () => [],
    },
    dataList: {
      //表格展示数据
      type: Array,
      default: () => [],
    },
    pagina: {
      //分页数据
      type: Object,
      default: () => {
        return {
          pageNo: 1,
          pageSize: 1,
          total: 0,
        };
      },
    },
    maxHeight: {
      //最大高度
      type: String,
      default: '550',
    },
    stripe: {
      //是否显示斑马纹
      type: Boolean,
      default: true,
    },
    border: {
      //是否显示纵向的边框
      type: Boolean,
      default: true,
    },
    selection: {
      //是否可多选
      type: Boolean,
      default: false,
    },
    index: {
      //是否显示序列号
      type: Boolean,
      default: true,
    },
    expand: {
      //是否展开行
      type: Boolean,
      default: false,
    },
    hasPage: {
      // 是否显示分页组件
      type: Boolean,
      default: true,
    },
    rowKey: {
      //行数据的key
      type: String,
      default: '',
    },
    indexLabel: {
      type: String,
      default: '序号',
    },
    headerBg: {
      //表头行是否有背景色
      type: Boolean,
      default: true,
    },
    size: {
      type: String,
      default: 'mini',
    },
    summary: {
      // 是否显示合计项
      type: Boolean,
      default: false,
    },
    selectBox: {
      //复选框可用/禁用状态处理函数
      type: Function,
      default: null,
    },
    summaryMethod: {
      //合计行处理函数
      type: Function,
      default: null,
    },
    spanMethod: {
      //合计行处理函数
      type: Function,
      default: null,
    },
  },
  data() {
    return {
      tableData: null,
      pagination: {
        pageNo: 1,
        pageSize: 1,
        total: 0,
      },
    };
  },
  methods: {
    // 多选
    handleSelectionChange(selection) {
      this.$emit('selectionChange', selection);
    },
    handleSizeChange(pageSize) {
      this.pagination.pageSize = pageSize;
      this.$emit('pageChange', this.pagination);
    },
    handleCurrentChange(pageNo) {
      this.pagination.pageNo = pageNo;
      this.$emit('pageChange', this.pagination);
    },
  },
  watch: {
    dataList: {
      handler(newVal) {
        this.tableData = JSON.parse(JSON.stringify(newVal));
      },
      immediate: true,
      deep: true,
    },
    pagina: {
      handler(newVal) {
        this.pagination = JSON.parse(JSON.stringify(newVal));
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>
<style lang="scss">
.table-container {
  .el-table {
    margin-bottom: 20px;
  }
  .headerCell {
    background: #edeeee;
    color: #333;
  }
  .el-button {
    margin-bottom: 10px !important;
  }
}
</style>

组件引用

<baseTable :columns="columns" :dataList="tableData" :index="true" indexLabel="排名"
    maxHeight="500" >
    //使用插槽,使用的2.6之前的语法
    <template slot="processed" slot-scope="scope">
         {{ numHandle(scope.row.processed) }}
    </template>
    <template slot="rejected" slot-scope="scope">
         {{ numHandle(scope.row.rejected) }}
    </template>
    <template slot="operation" slot-scope="scope">
        <el-button type="text" @click="getDetails(scope.row)">详情</el-button>
    </template>
</baseTable>

import baseTable from "../../components/BaseTable";

components: { baseTable}

columns: columns:[
		{
          prop:'service',
          label:'名称',
          width:180,
        },
        {
          prop:'reviewed',
          label:'已审核',
          width:180,
        },
        {
          prop:'processed',
          label:'已处理',
          width:180,
        },
        {
          prop:'rejected',
          label:'已拒绝',
          width:180,
        },
        {
          prop:'operation',
          label:'操作',
        },
      ],
tableData: [
        {
          serviceId:'001',
          service:'苏无名',
          processed:'1500',
          rejected:'100',
        },
        {
          serviceId:'002',
          service:'卢凌风',
          processed:'1500',
          rejected:'100',
        },
        {
          serviceId:'003',
          service:'裴喜君',
          processed:'1500',
          rejected:'100',
        },
        {
          serviceId:'004',
          service:'费鸡师',
          processed:'1500',
          rejected:'100',
        },
        {
          serviceId:'005',
          service:'薛环',
          processed:'1500',
          rejected:'100',
        },
        {
          serviceId:'006',
          service:'裴坚',
          processed:'1500',
          rejected:'100',
        },
        {
          serviceId:'007',
          service:'太平公主',
          processed:'1500',
          rejected:'100',
        },
        {
          serviceId:'008',
          service:'太子',
          processed:'1500',
          rejected:'100',
        },
        {
          serviceId:'009',
          service:'大将军',
          processed:'1500',
          rejected:'100',
        },
        {
          serviceId:'010',
          service:'李樱桃',
          processed:'1500',
          rejected:'100',
        },
      ],