封装一个基于el-table的公共组件使用起来更方便，更易于维护

• 这样子做之后，我们可以通过数据去生成表格，让数据和template分离

<template>
  <div class="base-table">
    <el-table v-bind="$attrs">
      <template v-for="item in columns" >
        <el-table-column type="selection" width="55" v-if="item.type === 'selection'" key="selection"></el-table-column>
        <el-table-column v-else-if="!item.type" v-bind="item" :key="item.prop"></el-table-column>
        <el-table-column v-else-if="item.type === 'action'" v-bind="item" size="mini" >
          <template  slot-scope="scope">
            <template v-for="(btn, index) in item.list">
              <el-button :type="btn.type || 'text'" @click="handleAction(btn.action, scope.row)"
                         v-if="!btn.showCondition || btn.showCondition(scope.row)"
                         :key="index" :size="btn.size || 'small'">
                {{ btn.text }}
              </el-button>
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'BaseTable',
  props: {
    columns: {
      type: Array,
      required: true,
    },
  },
  methods: {
    handleAction(action, row) {
      this.$emit('handleAction', { action, row: { ...row } });
    },
    isDeletedMap(cellValue) {
      return { 0: '已生效', 1: '已失效' }[cellValue];
    },
  },
};
</script>

<style lang='scss' scoped>

</style>

如何使用

<template>
  <div>
    <base-table :columns="columns"
                size="small"
                highlight-current-row
                :data="tableData"
                style="width: 100%;"
                :empty-text="emptyText"
                @handleAction="handleAction"
    />
  </div>
</template>
<script>

import Vue from 'vue';
import BaseTable from "@/components/BaseTable.vue";

export default {
  name: 'bookKeepingTable',
  components: {BaseTable},
  props: ['tableEmptyInfo', 'tableData', 'emptyText'],
  data() {
    return {
      columns: [
        { prop: "id", label: "记账单号" },
        { prop: "csrGroupNo", label: "集团号" },
        { prop: "csrPnNo", label: "会员号" },
        { prop: "csrName", label: "会员名称" },
        { prop: "assetType", label: "资产账户" },
        { prop: "name", label: "资产名称" },
        { prop: "sum", label: "资产总值" },
        { prop: "moneyType", label: "币种" },
        { prop: "custodian", label: "托管商" },
        { prop: "isDeleted", label: "资产状态",
          formatter: (row, column, cellValue, index) => {
            return this.isDeletedMap(cellValue);
          }
        },
        { prop: "founder", label: "创建人" },
        { prop: "createdTime", label: "创建时间", width: "150px",
          formatter: (row, column, cellValue, index) => {
            return this.formatCreatedTime(cellValue);
          }
        },
        {
          fixed: 'right',
          type: 'action',
          label: '操作',
          list: [
            {
              action: 'view',
              text: '查看',
              showCondition: (row) => {
                return row.isDeleted === 0;
              },
            },
            {
              action: 'edit',
              text: '修改',
              showCondition: (row) => {
                return row.isDeleted === 0;
              },
            },
            {
              action: 'delete',
              text: '删除',
              showCondition: (row) => {
                return row.isDeleted === 0;
              },
            }
          ]
        }
      ],
    };
  },
  methods: {
    handleAction({action, row}) {
      const actionHandlers = {
        view: this.viewRecord,
        edit: this.editRecord,
        delete: this.deleteRecord,
      };
      const handler = actionHandlers[action];
      if (handler) {
        handler.call(this, row);
      }
    },
    isDeletedMap(isDeleted) {
      return { 0: '已生效', 1: '已失效' }[isDeleted];
    },
    formatCreatedTime(timestamp) {
      return Vue.moment(timestamp, 'YYYYMMDD').format('YYYY/MM/DD hh:mm:ss');
    },
    deleteRecord(row) {
      this.$emit('update:deleteRecord', row);
    },
    editRecord(row) {
      this.$emit('update:editRecord', row);
    },
    viewRecord(row) {
      this.$emit('update:viewRecord', row);
    },
  },
};
</script>

<style scoped lang="scss">

</style>