封装elementui的table组件

table.vue

<template>
  <el-table
    v-bind="$props"
    border
    :header-cell-style="{ 'text-align': 'center' }"
    style="width: 100%"
  >
    <el-table-column
      label="序号"
      width="50"
      align="center"
    >
      <template slot-scope="scope">
        {{ scope.$index + 1 }}
      </template>
    </el-table-column>
    <template v-for="(col, key) in tableColumns">
      <el-table-column
        :key="key"
        v-bind="col"
      />
    </template>
  </el-table>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import { Table } from 'element-ui'
export type Column = {
  label: string
  prop?: string
  width?: string
  minWidth?: string
  fixed?: string | boolean
  align?: 'left' | 'center' | 'right'
  formatter?: { (row: any, col: any, value: any): unknown }
  // renderHeader的使用 https://www.cnblogs.com/yixiancheng/p/11525970.html
  renderHeader?: { (h: any, { column, $index }: any): unknown }
}

@Component({
  props: {
    ...(Table as any).props,
  }
})
export default class extends Vue {
    @Prop({ default: () => ([]) }) tableColumns!: Column
}
</script>

使用

<Table
        v-loading="loadings.fetch"
        :data="tableData"
        :table-columns="tableColumns"
      />


@Component({
  components: { Pagination, Search, CreateCoupon, CreateAccountCoupon, Table },
  name: 'coupon',
})
export default class extends Vue {
  loadings = { fetch: false }
  tableData: any = []

  // table 列
  get tableColumns(): Column[] {
    return [
      {
        label: '创建人',
        prop: 'userInfo.nickname',
        align: 'center',
      },
      {
        label: '主体名称',
        align: 'center',
        formatter: (row: any) => {
          return this.$createElement(CopyAccountTableColumnNew, {
            props: {
              align: 'center',
              'name-key': row?.accountInfo?.verifiedName,
              'id-key': row?.accountInfo?.id,
            },
          })
        },
      },
      {
        label: '来源',
        align: 'center',
        formatter: (row: any) => {
          return this.couponSourceEnumMap.get(row.source)
        },
      },
      {
        label: '类型',
        align: 'center',
        formatter: (row: any) => {
          return this.couponTypeEnumMap.get(row?.couponTemplate?.type)
        },
      },
      {
        label: '使用场景',
        align: 'center',
        formatter: (row: any) => {
          return row.couponTemplate.usage.map((item: any) => this.couponUsageEnumMap.get(item)).join('|')
        },
      },
      {
        label: '折扣',
        align: 'center',
        formatter: (row: any) => {
          return this.convert(row)
        },
      },
      {
        label: '状态',
        align: 'center',
        formatter: (row: any) => {
          return this.couponStatusMap.get(row.status)
        },
      },
      {
        label: '创建时间',
        prop: 'createTime',
        align: 'center',
        formatter: (row: any, col: any, value: any) => this.timeFormatter(row, col, value),
      },
      {
        label: '过期时间',
        prop: 'expiredAt',
        align: 'center',
        formatter: (row: any, col: any, value: any) => this.timeFormatter(row, col, value),
      },
      {
        label: '操作',
        formatter: (row: any, col: any, value: any) => this.tableBtn(row, col, value),
      },
    ]
  }


  timeFormatter(row: any, col: any, value: string) {
    return moment(value).format('YYYY-MM-DD HH:mm:ss')
  }

  /**
   * 操作按钮
   * 文档 https://vuejs.org/v2/guide/render-function.html#createElement-Arguments
   * @param row
   * @param col
   * @param value
   * @returns
   */
  tableBtn(row: any, col: any, value: any) {
    const h = this.$createElement
    return h(
      'el-button',
      {
        style: {
          fontSize: '18px;',
        },
        props: {
          size: 'mini',
          plain: true,
          type: 'text',
        },
        on: {
          click: () => {
            this.$router.push({
              name: 'couponRecords',
              params: {
                accountCouponId: row?.id,
              },
            })
          },
        },
      },
      ['使用详情'],
    )
  }
}