antd-vue表格二次封装定制化

index.vue

<template>
  <div class="table">
    <a-table
      :row-selection="
        isRowSelection
          ? {
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange,
            }
          : null
      "
      :loading="loading"
      :locale="locale"
      :columns="columnsData"
      :components="components"
      :data-source="sourceData"
      :pagination="false"
      :scroll="isScroll ? { x: scrollXwidth } : {}"
      :defaultExpandedRowKeys="defaultExpandedRowKeys"
      @change="handleTableChange"
    >
      <!-- 角色管理 -->
      <div
      slot="filterDropdown"
      class="filter-dropdown"
    >
      <a-row>
        <a-col :span="24">
          <a-col :span="5">企业管理员：</a-col>
          <a-col :span="19" class="num-style">{
   {
   countRoleData.adminTotal}}名</a-col>
          <a-col :span="24" class="c9">(支持查看所有页面、管理演练员工、编辑模板、发布/删除演练、管理团队成员)</a-col>
        </a-col>
        <a-col :span="24">
          <a-col :span="4">操作者：</a-col>
          <a-col :span="19" class="num-style">{
   {
   countRoleData.handlersTotal}}名</a-col>
          <a-col :span="24" class="c9">(支持查看数据报表、管理演练员工、编辑模板、发布演练)</a-col>
        </a-col>
        <a-col :span="24">
          <a-col :span="4">查看者：</a-col>
          <a-col :span="19" class="num-style">{
   {
   countRoleData.viewerTotal}}名</a-col>
          <a-col :span="24" class="c9">(支持查看数据报表、查看演练数据)</a-col>
        </a-col>
      </a-row>
    </div>
    <icon
      slot="filterIcon"
      slot-scope="filtered"
      name="warning-circle"
      :style="{ color: filtered ? '' : undefined }"
    />
      <!-- defaultHeader 为true时 表头定制 -->
      <template v-for="(componentObj, key) in customTitleObj" :slot="key">
        <span :key="key">
          <component :is="componentObj" />
        </span>
      </template>

      <!-- slot -->
      <template
        v-for="(col, index) in slotList"
        :slot="col.dataIndex"
        slot-scope="text, record"
      >
        <span :key="index">
          <!-- 有定制展示某一列的走此处 -->
          <template v-if="slotObj[col.dataIndex]">
            <component
              :is="slotObj[col.dataIndex].colComponent"
              :record="record"
              :text="text"
              :dataIndex="col.dataIndex"
              @operationFuClick="operationClick"
            />
          </template>
          <!-- 没有定制展示某一列的走此处 -->
          <template v-else>
            <template
              v-if="
                text === '' ||
                text === null ||
                text === undefined ||
                typeof text === 'null' ||
                typeof text === 'undefined'
              "
            >
              <span v-if="col.config.tableType === 'overdue'">全部</span>
              <span v-else-if="col.config.type != 'switch'">暂无</span>
            </template>

            <template v-else-if="col.config.type === 'popover'">
              <a-popover placement="topLeft">
                <template slot="content">
                  <div style="max-width: 200px">{
   {
    text }}</div>
                </template>
                <div
                  class="ellipsis"
                  :style="{
                    'max-width': col.config.maxWidth
                      ? col.config.maxWidth
                      : '90%',
                  }"
                >
                  <span>{
   {
    text }}</span>
                </div>
              </a-popover>
            </template>

            <template v-else-if="col.config.type === 'switch'">
              <a-switch
                :default-checked="text"
                @change="
                  (val) => {
                    operationClick({}, record, {
                      switchValue: { dataIndex: col.dataIndex, value: val },
                    });
                  }
                "
              />
            </template>
            <template v-else>
              <span v-if="col.config.showZero">{
   {
    text }}</span>
              <span v-else>{
   {
    text == 0 ? "暂无" : text }}</span>
            </template>
          </template>
        </span>
      </template>

      <!-- 操作栏定制 -->
      <template slot="operation" slot-scope="text, record">
        <template v-if="operationObj[record.op_id]">
          <span
            v-for="(item, index) in operationObj[record.op_id]"
            :key="index + 'operation'"
            class="table-icon_wrap"
          >
            <!-- 有定制化按钮 -->
            <template
              v-if="
                item.operationComName && optationNameObj[item.operationComName]
              "
            >
              <!-- //权限判断（buttonHash[item.buttonHash] || !item.buttonHash） -->
              <!-- v-if="buttonHash(item.buttonHash) || !item.buttonHash" -->
              <component
                :is="optationNameObj[item.operationComName]"
                
                :record="record"
                :item="item"
                @operationFuClick="operationClick"
              />
            </template>
            <template v-else-if="item.operationComponent">
              <!-- //权限判断（buttonHash[item.buttonHash] || !item.buttonHash） -->
              <!-- v-if="buttonHash(item.buttonHash) || !item.buttonHash" -->
              <component
                :is="item.operationComponent"
                
                :record="record"
                :item="item"
                @operationFuClick="operationClick"
              />
            </template>
            <!-- 默认 -->
            <template v-else>
              <a-tooltip>
                <template slot="title">{
   {
    item.name }}</template>
                <!-- v-if="buttonHash(item.buttonHash) || !item.buttonHash" -->
                <div
                  
                  class="option-btn"
                  @click="operationClick(item, record)"
                >
                  <icon :name="item.icon" />