vue2 element-ui表格封装

1、table页面

<template>
    <section>
        <el-table
            :data="tableData"
            stripe
            style="width: 100%">
            <el-table-column
                v-for="item in columns"
                :key="item.prop"
                :label="item.label"
                :width="item.width"
                :prop="item.prop"
                :align="item.align" >
                <template slot-scope="{row}">
                    <slot :row="row" :col="item">{{row[item.prop] || '-'}}</slot>
                </template>
            </el-table-column>
            <slot name="operator"></slot>
        </el-table>
        <template v-if="showPagination">
            <Pagination
                :total="total"
                :page.sync="current"
                :pageSizes="pageSizes"
                :limit.sync="limit"
                @pagination="onPaginationChange" />
        </template>
    </section>
</template>

<script>
import Pagination from './pagination'
export default {
    name: 'DirectTableComponent',
    props: {
        // 列表数据
        tableData: {
            type: Array,
            default: () => []
        },
        // 列表表头数据
        columns: {
            type: Array,
            default: () => []
        },
        // 列表总条数
        total: {
            type: Number,
            default: 100
        },
        // 当前页面
        currentPage: {
            type: Number,
            default: 1
        },
        // 每页显示条数
        pageSize: {
            type: Number,
            default: 10
        },
        // 每夜显示条数选择
        pageSizes: {
            type: Array,
            default: () => [10, 20, 30, 50, 100, 200]
        },
        // 是否显示分页
        showPagination: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            current: this.currentPage,
            limit: this.pageSize
        }
    },
    methods: {
        // 分页change 事件
        onPaginationChange(data) {
            console.log(data,888)
            this.current = data.page
            this.limit = data.limit
            this.$emit('onPaginationChange', data)
        }
    },
    components: {
        Pagination
    }
}
</script>

<style lang="scss" scoped>
    @import '../css/newDirectVariable.scss';
    /deep/.el-table {
        border: 1px solid $borderMainColor;
        th {
            background: #F7F8FA;
            box-shadow: 0px 1px 0px 0px $borderMainColor;
            padding: 8px 0;
            font-size: 14px;
            font-weight: 500;
            color: $mainTextColor;
        }
        th.is-leaf {
            border-bottom: 1px solid $borderMainColor;
        }
        tr:not(:last-child) {
            td {
                border-bottom: 1px solid $borderMainColor;
            }
        }
        tr td{
            padding: 7px 0;
            color: $darkGrayColor;
        }
        tr:last-child td {
            border-bottom: none;
        }
        tr:nth-child(odd) td {
            background: #fff;
        }
        tr:nth-child(even) td {
            background: #F7F8FA;
        }
        &::before {
            height: 0;
        }
    }
</style>

2、分页 pagination.vue

<template>
  <div class="pagination-container">
    <el-pagination
      popper-class="popperClass"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :total="total"
      :page-sizes="pageSizes"
      :layout="layout"
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"/>
  </div>
</template>

<script>

export default {
  name: 'DirectPagination',
  props: {
    total: {
      required: true,
      type: Number
    },
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 10
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 30, 50]
      }
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
  },
  computed: {
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)
      }
    },
    pageSize: {
      get() {
        return this.limit
      },
      set(val) {
        this.$emit('update:limit', val)
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('pagination', { page: 1, limit: val })
    },
    handleCurrentChange(val) {
      this.$emit('pagination', { page: val, limit: this.pageSize })
    }
  }
}
</script>

<style lang="scss">
    @import '../css/newDirectVariable.scss';
    .popperClass {
        .el-select-dropdown__item {
            color: $mainTextColor;
        }
        .el-select-dropdown__item.selected {
            color: $mainColor;
        }
    }
</style>

<style lang="scss" scoped>
@import '../css/newDirectVariable.scss';
.pagination-container {
  background: #fff;
  padding: 7px 0;
    /deep/.el-pagination {
      padding: 0;
      text-align: right;
      .el-pagination__total, .el-pagination__sizes, .btn-prev, .btn-next, .el-pagination__jump  {
            font-size: 14px;
            padding: 0;
            margin: 0;
            color: $mainTextColor;
      }
      .el-pagination__total {
          margin-right: 10px;
      }
      button:disabled {
          color: #E0E2E7;
      }
      .number {
          font-size: 14px;
          font-weight: 400;
          color: $mainTextColor;
      }
      .el-pager li {
          width: 0!important;
          &.active {
              color: $mainColor;
          }
      }
      .btn-prev .el-icon, .btn-next .el-icon {
          display: inline-block;
      }
      span:not([class*=suffix]), button {
          height: 28px;
          line-height: 28px;
      }
      span:not([class*=el-pagination__total]) {
          line-height: 28px;
          height: 28px;
      }
      .el-pagination__editor.el-input {
          margin: 0 10px;
      }
      .el-input {
          margin: 0;
          .el-input__inner {
              border-radius: 3px;
              border-color: #E0E2E7;
              color: $mainTextColor;
              height: 28px;
          }
          .el-select__caret {
            color: $mainTextColor;
          }
      }
  }
}
.pagination-container.hidden {
  display: none;
}
</style>

3、使用

<!-- 列表 -->
<template>
	<direct-table-component
                    :columns="columns"
                    :tableData="tablsList"
                    :currentPage="current"
                    :total="total"
                    @onPaginationChange="onPaginationChange">
                    <!-- 询价记录列表特殊处理 -->
                    <template v-if="recordType === 0" v-slot="{ col, row }">
                        <div v-if="col.prop === 'inquiryDate'">
                            <div>{{row.inquiryDate | sliceStr(0, 10)}}</div>
                            <div>{{row.inquiryDate | sliceStr(11)}}</div>
                        </div>
                        <div v-else-if="col.prop === 'acceptance'">
                            <div class="acceptance" :title="row.acceptance">{{row.acceptance}}</div>
                            <div class="draft-no">{{row.draftNo}}</div>
                        </div>
                        <div v-else-if="col.prop === 'draftAmt'">
                            <span>{{row.draftAmt | fen2wan}}</span>
                        </div>
                        <div v-else>{{ row[col.prop] || '-' }}</div>
                    </template>
                    <template v-slot:operator>
                        <el-table-column align="center" width="150px" label="操作">
                            <template slot-scope="{row}">
                                <span
                                    class="operator-text"
                                    @click="toDetails(1, row)">详情</span>
                            </template>
                        </el-table-column>
                    </template>
                </direct-table-component>
</template>
<script>
import DirectTableComponent from './components/directTableComponent'
export default {
    name: 'NewDirectRecord',
    data() {
        return {
            // 列表列配置项
            columns: [
			      { label: '申请时间', prop: 'inquiryDate', align: 'center' },
			      { label: '承兑人/票号', prop: 'acceptance', align: 'center', width: '280px' },
			      { label: '票面金额(万)', prop: 'draftAmt', align: 'center' },
			      { label: '意向秒贴银行', prop: 'intentionDiscountBankName', align: 'center' },
			      { label: '意向行利率(%)', prop: 'intentionAnnualInterest', align: 'center' },
			      { label: '最优报价银行', prop: 'optimalDiscountBankName', align: 'center' },
			      { label: '最优行利率(%)', prop: 'optimalAnnualInterest', align: 'center' }
	   		 ],
            // 列表
            tablsList: []
            current: 1,
            size: 10,
            total: 0
        }
    },
    methods: {
        // 分页改变触发事件
        onPaginationChange(params) {
            this.current = params.page
            this.size = params.limit
        },
       
           
   
    components: {
        DirectTableComponent
    },
    mounted() {
    },
    created() {}
}
</script>