基于elementUI 的custom-table 组件简单封装

• 定义table 的 scheme

table.js

export const manualOrderTable = {
  hasSelect: false, // 是否展示选择框
  hasIndex: false, // 是否展示序号
  constomTableAttrs: {  // table 中的自定义属性
    "summary-method": (param) => {  // 求和
      debugger
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += ' 元';
        } else {
          sums[index] = 'N/A';
        }
      });

      return sums;
    }
    // "span-method": ({ row, column, rowIndex, columnIndex })=>{ // 合并单元格
    //   if (rowIndex % 2 === 0) {
    //     if (columnIndex === 0) {
    //       return [1, 2];
    //     } else if (columnIndex === 1) {
    //       return [0, 0];
    //     }
    //   }
    // }
  },
  columns: [
    { prop: 'createTime', label: '创建时间', width: '145', comstomProp: {} },
    { prop: 'title', label: '标题', comstomProp: {} },
    { prop: 'leadOrgName', label: '责任单位', width: '145', comstomProp: {} },
    { prop: 'createName', label: '创建人', width: '145', comstomProp: {} },
    { prop: 'orderStatusName',label: '问题单状态', comstomProp: {},children: [
      {
        prop: 'orderStatusName',label: '问题单状态1',
        children: [
          { prop: 'orderStatusName',label: '问题单状态1-1'},
          { prop: 'orderStatusName',label: '问题单状态1-2'},
        ]
      },
      {
        prop: 'orderStatusName',label: '问题单状态2',
        children: [
          { prop: 'orderStatusName',label: '问题单状态2-1'},
          { prop: 'orderStatusName',label: '问题单状态2-2'},
        ]
      },
    ]},
    { prop: 'content', label: '问题内容', comstomProp: {}},
    { prop: 'oper', label: '操作列', width: '145', comstomProp: {} }
  ]
}

• 封装的组件table.vue

<template>
  <div>
    <el-table
      ref="RefCustomTable"
      v-bind="{...$attrs,...constomTableAttrs}"
      v-on="$listeners"
      :data="data"
      header-cell-class-name="table-header-cell"
      header-row-class-name="table-header-class"
      :row-key="rowKey"
      style="width: 100%;"
    >
      <el-table-column
        v-if="hasIndex"
        :label="label||'序号'"
        type="index"
        :width="80"
      ></el-table-column>
      <!-- TODO:多选点击事件还没绑定 -->
      <el-table-column
          v-if="hasSelect"
          :selectable="selectable"
          type="selection"
          width="55"
      ></el-table-column>
      <!-- 列表字段 -->
      <slot v-for="item in columns" :name="item.prop" v-bind="item.constomProp">
        <el-table-column
          v-if="!item.children"
          :key="item.prop"
          :formatter="item.formatter"
          :label="item.label"
          :prop="item.prop"
          :resizable="false"
          :show-overflow-tooltip="true"
          :sortable="item.sortable"
          :width="item.width"
          :align="item.align ||'center'"
          >
        </el-table-column>
        <MultiColumn v-else :item="item"></MultiColumn>
      </slot>
    </el-table>
  </div>
</template>

<script>
import MultiColumn from "./components/multi-column.vue"
  export default {
    components: {
      MultiColumn
    },
    props: {
      data: {
        type: Array,
        default: ()=>{
          return []
        }
      },
      constomTableAttrs: {
        type: Object,
        default: ()=>{}
      },
      rowKey: {
        type: String,
        default: 'id'
      },
      hasIndex: {
        type: Boolean,
        default: false
      },
      hasSelect: {
        type: Boolean,
        default: false
      },
      columns: {
        type: Array,
        default: ()=>{
          return []
        }
      }
    },
  }
</script>

• 引入的多列递归组件MultiColumn.vue

<template>
  <el-table-column
      :key="item.prop"
      :class-name="item.columnClass"
      :formatter="item.formatter"
      :label="item.label"
      :min-width="item.minWidth"
      :prop="item.prop"
      :show-overflow-tooltip="true"
      :sortable="item.sortable"
      :width="item.width"
      :align="item.align||'center'"
  >
    <template v-if="item.children">
      <multi-column v-for="(col, index) in item.children" :key="index" :item="col"></multi-column>
    </template>
  </el-table-column>
</template>

<script>
export default {
  name: "MultiColumn",
  props: {
    item: {
      type: Object
    }
  }
};
</script>

• 实际使用

...代码片段
<custom-table
      :data="tableData"
      :border="true"
      show-summary
      :hasSelect="manualOrderTable.hasSelect"
      :hasIndex="manualOrderTable.hasIndex"
      @row-click="handleRowClick"
      :constomTableAttrs="manualOrderTable.constomTableAttrs"
      :columns="manualOrderTable.columns">
        <template v-slot:oper>
          <el-table-column align="center" label="操作列">
            <template slot-scope="scope">
              <el-button v-if="searchParams.type == 2" :disabled="scope.row.orderStatus != 1" type="text" @click.stop="approvalNode(scope, searchParams.type)">审核</el-button>
              <el-button v-if="searchParams.type == 3" :disabled="scope.row.orderStatus != 2" type="text" @click.stop="approvalNode(scope, searchParams.type)">治理</el-button>
              <el-button v-if="searchParams.type == 4" :disabled="scope.row.orderStatus != 3" type="text" @click.stop="approvalNode(scope, searchParams.type)">确认</el-button>
              <el-button type="text" @click.stop="goDetail(scope.row, scope.row.orderStatus, true)">详情</el-button>
            </template>
          </el-table-column>
        </template>
</custom-table>
...代码片段

<script>
import { manualOrderTable } from './table'
import customTable from '@/components/common/table'
export default {
    name: 'manualOder',
    components: {
      customTable,
      ...代码片段
    },
    ...代码片段
 }
<script>

撒花