实现列表公共组件封装和使用

1、公共组件的封装commonTableColumn.vue：

<template>
  <!-- 列表公共组件-->
  <el-table
    border
    ref="mdBusinessTable"
    :data="tableData"
    class="list-table"
    @sort-change="sortChange"
    @row-click="rowClickFun"
    :row-key="getRowKeys"
    @selection-change="selectionChange"
    :height="tableHeight">
    <template v-for="item in tableColumns">
      <!-- 选择框、序列号-->
      <template v-if="item.showType === 'SELECTINDEX'">
        
      </template>
      <!-- 数据列表 showType HIDDEN 动态控制某一列数据不展示-->
      <template v-else>

      </template>
    </template>
  </el-table>
</template>

<script>
// 公共过滤
import { commonFilterMixins } from '@/utils/filters';
export default {
  name: "commonTableColumn",
  mixins: [commonFilterMixins],
  props: {
    tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    tableHeight: [String, Number],
    rowKey: String,
    sortChangeCall: Function,
    rowClickCall: Function,
    selectionChangeCall: Function,
    // 列表
    tableColumns: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  methods: {
    //解决分页选择的数据不会清空
    getRowKeys(row) {
      return row[this.rowKey];
    },
    doLayout() {
      this.$refs.mdBusinessTable.doLayout();
    },
    sortChange(row) {
      this.sortChangeCall && this.sortChangeCall(row);
    },
    rowClickFun(row) {
      this.rowClickCall && this.rowClickCall(row);
    },
    selectionChange(row) {
      this.selectionChangeCall && this.selectionChangeCall(row);
    },
    /* 方法触发回调*/
    handleFunction(functionName, row){
      this.$emit(functionName, row);
    }
  },
};
</script>

2、使用方法：

<common-table-column
          :tableData="tableData"
          :tableColumns="departmentTableColumns"
          :tableHeight="tableHeight"
          rowKey="controlSeq"
          :sortChangeCall="sortChange"
          :rowClickCall="rowClickFunc"
          :selectionChangeCall="changeFun"
          @handleControlSeq="handleControlSeq">
          <!-- 办件综合倒计时倒计时-->
          <template slot-scope="scope" slot="downDays_HEADER">
            <countdown-header :type="1"></countdown-header>
          </template>
          <template slot-scope="scope" slot="downDays">
            <countdown :downDays="scope.row.downDays" :downDaysWarningType="scope.row.downDaysWarningType" :ptDownType="scope.row.ptDownType"></countdown>
          </template>
          <!-- 事项名称-->
          <template slot-scope="scope" slot="itemJoinName">
            <div class="ellipsis">
              <el-tooltip :content="scope.row.itemJoinName" placement="top" effect="dark">
                <span>{{scope.row.itemJoinName}}</span>
              </el-tooltip>
            </div>
            <!-- 事项标识组件 -->
            <item-name-tag :row="scope.row"></item-name-tag>
          </template>
          <!-- 办件来源-->
          <template slot-scope="scope" slot="applySrc">
            {{ getApplySrc(scope.row.applySrc,scope.row.applySrcSub) }}
          </template>
          <!-- 环节倒计时-->
          <template slot-scope="scope" slot="stepDownDays_HEADER">
            <countdown-header :type="4"></countdown-header>
          </template>
          <template slot-scope="scope" slot="stepDownDays">
            <countdown :downDays="scope.row.stepDownDays" :downDaysWarningType="scope.row.stepDownDaysWarningType" :ptDownType="scope.row.ptDownType"></countdown>
          </template>
        </common-table-column>

3、列表数据tableColumns：

/**
 * table 展示数据列控制字典
 * showType: '',  SELECTINDEX：选择或者序列号， CUSTOMSLOT： 自定义内容展示插槽组件， TEXT : 默认文本类型展示 ， BUTTON： 按钮文本
 * type: 'selection', 对应列的类型。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引
 * prop: 'selection', 对应列内容的字段名，也可以使用 property 属性
 * label: '', 显示的标题
 * reseverSelection: true, 仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）
 * sortable: null, 对应列是否可以排序，如果设置为 'custom'
 * fixed: true, 列是否固定在左侧或者右侧，true 表示固定在左侧
 * width: '58', 对应列的宽度
 * minWidth: '' 对应列的最小宽度
 * showOverflowTooltip 当内容过长被隐藏时显示 tooltip
 * soltTemplate： 自定义插槽部分 ，header: 头部
 * callFunction： 回调函数名
 * filterOptions： 过滤字典
 *
 * */
// 字典2
import {controlResultOptions, handOverOptions } from "@/assets/js/dataJson2.js";

// 部门已办办件列表
export const departmentTableColumns = [
  {
    showType: 'SELECTINDEX',
    type: 'selection',
    prop: 'selection',
    reseverSelection: true,
    fixed: true,
    width: '48',
  }, {
    showType: 'SELECTINDEX',
    type: 'index',
    prop: 'index',
    label: '序号',
    fixed: true,
    width: '70',
  }, {
    showType: 'CUSTOMSLOT',
    prop: 'downDays',
    label: '办件倒计时',
    sortable: 'custom',
    width: '150',
    soltTemplate: 'header',
  }, {
    showType: 'TEXT',
    prop: 'stepName',
    label: '当前步骤',
    width: '150',
    showOverflowTooltip: true
  }, {
    showType: 'TEXT',
    prop: 'hasHandOver',
    label: '材料移交状态',
    width: '150',
    filterOptions: handOverOptions
  }, {
    showType: 'CUSTOMSLOT',
    prop: 'itemJoinName',
    label: '事项名称',
    width: '338',
    showOverflowTooltip: null
  }, {
    showType: 'TEXT',
    prop: 'projectName',
    label: '项目名称',
    width: '338',
    showOverflowTooltip: true
  }, {
    showType: 'TEXT',
    prop: 'custName',
    label: '申请人',
    width: '150',
    showOverflowTooltip: true
  }, {
    showType: 'TEXT',
    prop: 'approveStatusStr',
    label: '当前状态',
    width: '120',
    showOverflowTooltip: true
  }, {
    showType: 'TEXT',
    prop: 'applyDate',
    label: '申请日期',
    sortable: 'custom',
    width: '180',
  }, {
    showType: 'TEXT',
    prop: 'acceptDate',
    label: '受理日期',
    sortable: 'custom',
    width: '180',
  }, {
    showType: 'BUTTON',
    prop: 'controlSeq',
    label: '办件流水号',
    width: '200',
    callFunction: 'handleControlSeq'
  }, {
    showType: 'TEXT',
    prop: 'controlResult',
    label: '办件结果',
    width: '120',
    filterOptions: controlResultOptions
  }, {
    showType: 'TEXT',
    prop: 'unitName',
    label: '所属单位',
    width: '160',
  }, {
    showType: 'CUSTOMSLOT',
    prop: 'applySrc',
    label: '办件来源',
    width: '120',
  }, {
    showType: 'CUSTOMSLOT',
    prop: 'stepDownDays',
    label: '环节倒计时',
    sortable: 'custom',
    minWidth: '140',
    soltTemplate: 'header',
  }
];

4、实现效果：