基于vxe-table的公共表格（包含大部分基础功能）

表格主组件

KTable.vue

HTML部分

<template>
  <div
    class="table-wrapper"
    v-loading="loading"
    element-loading-text="加载中..."
  >
    <vxe-table
      :ref="tableRef"
      :resizable="resizable"
      :class="[
        'my-table-scrollbar',
        tableRef,
        isNeedFirstLine ? 'hide-scroll-table' : '',
        border ? 'show-warp-border' : '',
        isShowColor ? 'is-show-color' : '',
        whetherToMerge || border ? 'set-table-border' : '',
        isShowTotal ? 'set-scroll-table' : '',
      ]"
      :data="tableData"
      :max-height="height ? height : minHeight"
      :row-config="{ isHover: true }"
      :sort-config="{ remote: true, trigger: 'cell', defaultSort: defaultSort }"
      :tooltip-config="{ showAll: false }"
      :border="border"
      :row-id="rowId"
      :show-footer="isShowTotal && tableData.length"
      :footer-span-method="isNeedTotalMerge && footerColspanMethod"
      :footer-method="footerMethod"
      :tree-config="
        dataStructure === '1'
          ? treeConfig1
          : treeConfig2.transform
          ? treeConfig2
          : false
      "
      :span-method="whetherToMerge && mergeRowMethod"
      header-row-class-name="vxe-table__header-row"
      :header-cell-style="headMerge"
      :cell-style="defaultCellStyle"
      :footer-cell-style="footerCellStyle"
      @scroll="handleScroll"
      @sort-change="val => sortChange(val, 'table')"
    >
      <vxe-table-column
        align="left"
        title="序号"
        width="80"
        :fixed="isFixed"
        v-if="showSerial && tableConfig.length"
      >
        <template v-slot="{ rowIndex }">
          <span>{
  { rowIndex + (pageIndex - 1) * pageSize + 1 }}</span>
        </template>
      </vxe-table-column>
      <k-table-column
        v-for="item in tableConfig"
        :key="item.prop"
        ref="KTableColumn"
        :options="item"
        :propsCode="propsCode"
        :resizeSearch="resizeSearch"
        :searchLoading="searchLoading"
        :sortConfigObj="sortConfigObj"
        :treeData="treeData"
        :treeDataProps="treeDataProps"
        @popoverOpen="popoverOpen"
        @filter-change="filterColumnChange"
        @sort-table-change="val => sortChange(val, 'custom')"
      ></k-table-column>

      <slot></slot>

      <template #empty>
        <k-empty type="table"></k-empty>
      </template>
    </vxe-table>
    <k-pagination
      v-if="tableData.length && isShowPagina"
      v-bind="$attrs"
      v-on="$listeners"
      :total="total"
      :page="page"
      :limit="limit"
    ></k-pagination>
  </div>
</template>

JS部分

<script>
import KTableColumn from '../KTableColumn/index'
import KEmpty from '../KEmpty/index'
import KPagination from '@/components/KPagination'
import {
    numToFixed } from '@/util/common'
export default {
   
  name: 'KTable',

  components: {
   
    KTableColumn,
    KEmpty,
    KPagination,
  },
  props: {
   
    // 展示的code name
    propsCode: {
   
      type: Object,
      default: () => {
   
        return {
   
          prop: 'prop',
          label: 'label',
          children: 'children',
        }
      },
    },
    /**
     * 表格加载
     */
    loading: {
   
      type: Boolean,
      default: false,
    },
    /**
     * 单元格样式
     */
    isShowSecondColor: {
   
      type: Boolean,
      default: false,
    },
    /**
     * 如果首行需要颜色，但是表头传入为空，传入需要颜色的表头prop
     */
    tableHeaderProp: {
   
      type: String,
      default: '',
    },
    /**
     * 表格配置数据 Array
     *
     * 参数
     * | label | 表头文案 | String | 必传 |
     * | prop | 要渲染的内容字段key | String | 必传 |
     * | format | 要特殊处理的内容 | Function(row, index) |
     * | align |对齐方式，默认center | String | left/center/right | 默认center |
     * | width | 对应列的宽度 | string |
     * | min-width | 最小列宽度；会自动将剩余空间按比例分配 | Number/string | px, % | 默认120px |
     * | sort | 是否需要排序（如果filter和sort同时使用，filter会覆盖sort） | Boolean | 默认false |
     * | filter | 是否需要过滤（如果filter和sort同时使用，filter会覆盖sort） | Boolean | 默认false |
     * | showSerial | 是否需要序号 | Boolean | 默认true |
     * | children | 多级表头的数据集合 | Array |
     *
     * 方法
     * | @sort-change | 排序回调方法 | Function({ field, order }) |
     * | @filter-change | 过滤回调方法 | Function({ field, order, inputValue }) |
     */
    tableConfig: {
   
      type: Array,
      default: () => [],
    },

    /**
     * 表格数据
     */
    tableData: {
   
      type: Array,
      default: () => [],
    },

    /**
     * 合计行数据
     */
    totalRowData: {
   
      type: Object,
      default: () => {
   },
    },
    /**
     * 表格高度  592
     */
    height: {
   
      type: String || Number,
      default: '',
    },
    /**
     * 是否显示合计
     */
    isShowTotal: {
   
      type: Boolean,
      default: false,
    },
    /**
     * 合计是否需要合并
     */
    isNeedTotalMerge: {
   
      type: Boolean,
      default: false,
    },
    /**
     * 默认排序
     */
    defaultSort: {
   
      type: Object,
      default: () => {
   
        return {
   
          field: '',
          order: '',
        }
      },
    },
    /**
     * 合计是否需要放首行
     */
    isNeedFirstLine: {
   
      type: Boolean,
      default: false,
    },
    /**
     * 需要放首行的表格类名
     */
    tableClass: {
   
      type: String,
      default: '',
    },
    /**
     * 是否需要合并
     */
    whetherToMerge: {
   
      type: Boolean,
      default: false,
    },
    /**
     * 合计是否需要颜色
     */
    isShowColor: {
   
      type: Boolean,
      default: true,
    },
    /**
     * 需合并列表头prop
     */
    fields: {
   
      type: Array,
      default: () => [],
    },
    /**
     * 表头是否需要合并
     */
    isNeedHeaderMerage: {
   
      type: Boolean,
      default: false,
    },
    /**
     * 是否显示分页
     */
    isShowPagina: {
   
      type: Boolean,
      default: false,
    },
    /**
     * @description: 最小高度
     */
    minHeight: {
   
      type: Number,
      default: 400,
    },

    /**
     * 是否显示序列
     */
    showSerial: {
   
      type: Boolean,
      default: false,
    },
    /**
     * 序号是否需要固定
     */
    isFixed: {
   
      type: String || Boolean,
      default: false,
    },
    /**
     * 是否要隐藏滚动条
     */
    isShowScroll: {
   
      type: Boolean,
      default: false,
    },
    /**
     * 筛选loading
     */
    searchLoading: {
   
      type: Boolean,
      default: false,
    },
    /**
     * 树形表格数据结构
     *  如果等于1则数据结构为：
     *   {
     *     name: 'Test1',
     *     children: [
     *       {
     *         name: 'Test1',
     *       }
     *     ]
     *   },
     *   如果等于2则数据结构为：
     *    {
     *       id: 10050,
     *       parentId: null,
     *       name: 'Test2',
     *     },
     *     {
     *       id: 24300,
     *       parentId: 10050,
     *       name: 'Test3',
     *     },
     *
     *  dataStructure = ‘2’ 时 treeConfig2必传
     */
    dataStructure: {
   
      type: String,
      default: '2',
    },
    /**
     * 树形表格配置属性1
     */
    treeConfig1: {
   
      type: Object,
      default: () => {
   
        return {
   
          /**
           * 树形表格子节点名称
           */
          children: 'children',
          iconOpen