基于antdv封装的特殊复杂表格，带通行描述信息

主要功能：

1. 可展示通行的单元格信息
2. 可跨页选择数据功能
3. 表单插槽、合计插槽、操作按钮区插槽
4. 分页功能
5. 接口内请求api
6. 可编辑单元格
7. 表格组件暴漏出的方法：查询、获取选中数据、接口返回数据、当前表格数据【设置可编辑单元格时获取数据】

页面示例：

本页主要是下面这种大通行效果【选择和序号都通行】

还有一种是通行不带选择和序号，如下：代码下载地址 ： https://download.csdn.net/download/qq_32442967/87965962

使用示例：

页面文件page.vue

<template>
  <self-table
    ref="selfTableRef"
    :full-row-type="fullRowType"
    :api="planManageListApi"
    :columns="tableColumns(fullRowType)"
    :full-row-key-list="['noId']"
    :has-checkbox="true"
    :allTableColumnsNum="8"
    :tableProps="{}"
  >
    <template #form>
    	<!-- 自定义表单组件 可用任意表单组件 submit为表单 查询按钮事件 -->
      <BasicForm  @submit="handleSubmit" />
    </template>
    <template #tableTitle> 订单总重量：[<span class="color-red">1244.533</span> 吨] </template>
    <template #tableHead>
      <a-button type="primary">导出</a-button>
    </template>
    <template #full-row="{ row }">
      计划单号：<a-button type="link" size="small" @click="handlePlanDetail(row)">{
   { row.noId }}</a-button> 计划总量：1 吨申报时间：2023-04-26
      17:09:26 审核时间：2023-04-26 17:09:46
    </template>
    <template #colSlot1="{ row }">
      <div>申报单位：{
   { row.xa }}XXXXX有限责任公司</div>
      <div>申报人：欧冶材料</div>
    </template>
    <template #colSlot4="{ row }">
      <div>钢材 10 {
   { row.xs }}</div>
      <div>钢材 20</div>
    </template>
    <template #action="{ row }">
      <a-button type="link" size="small" @click="handlePlanApply('edit', row)">修改</a-button>
    </template>
  </self-table>
</template>
<script setup lang="ts">
  import SelfTable from '/@/views/components/SelfTable/index.vue';
  import {
       ref } from 'vue';
  import {
       FullRowType } from '/@/views/components/SelfTable/selfTableTools';
  import {
       tableColumns } from '/@/views/planManage/planManage.data';
  import {
       planManageListApi } from '/@/views/planManage/planManage.api';
  // 定义通行类型
  const fullRowType: FullRowType = 'prev';
  const selfTableRef = ref();

  function handleSubmit(v) {
      
    selfTableRef.value.search(v);
  }

</script>

<style scoped lang="less"></style>

planManage.data中tableColumns() 方法

export const tableColumns = (fullRowType): SelfTableColumnType[] => [
  {
    
    title: '计划信息',
    dataIndex: 'key1',
    width: 300,
    customCell: (_, index) => sharedOnCell(index, fullRowType),
    slot: 'colSlot1',
  },
  {
    
    title: '计划状态',
    dataIndex: 'planStatus',
    width: 120,
    customCell: (_, index) => sharedOnCell(index, fullRowType),
  },
  {
    
    title: '区域',
    dataIndex: 'oldRecordCdName',
    width: 220,
    align: 'center',
    customCell: (_, index) => sharedOnCell(index, fullRowType),
  },
  {
    
    title: '详情',
    dataIndex: 'createTime',
    width: 300,
    customCell: (_, index) => sharedOnCell(index, fullRowType),
    slot: 'colSlot4',
  },
  {
    
    title: '审核人',
    dataIndex: 'accountMark',
    width: 100,
    align: 'center',
    customCell: (_, index) => sharedOnCell(index, fullRowType),
  },
  {
    
    title: '操作',
    key: 'action',
    fixed: 'right',
    align: 'center',
    width: 180,
    customCell: (_, index) => sharedOnCell(index, fullRowType),
  },
];

参数说明：

字段	类型	描述
api	Promise	表格数据api
dataSource	array	表格数据
columns	array	表格column数据,列数据一定要指定width
has-checkbox	boolean	是否可选，默认false
full-row-type	string	通行类型 ‘prev’ 前一行，‘last’ 后一行 ，FullRowType类型
tableProps	Object	传给antd table组件的数据
allTableColumnsNum	number	所有的表格列数【包含选择列和序号列】

SelfTable.vue组件

<template>
  <a-card style="margin: 8px" v-if="$slots['form']">
    <slot name="form"></slot>
  </a-card>
  <component :is="isDiv ? 'div' : 'a-card'" style="margin: 8px">
    <!--  可放操作按钮  -->
    <div class="table-head" v-if="$slots['tableHead']">
      <slot name="tableHead"></slot>
    </div>
    <!--  可放合计数据  -->
    <div class="table-head" v-if="$slots['tableTitle']">
      <slot name="tableTitle"></slot>
    </div>
    <a-alert class="a-alert-cont" type="info" show-icon v-if="hasCheckbox">
      <template #message>
        <span>{
   { checkedAlertMessage }}</span>
        <template v-if="checkedList.length">
          <a-divider type="vertical" />
          <a href="javascript:" @click="resetCheckbox">清空</a>
        </template>
      </template>
    </a-alert>
    <a-table
      :columns="columns"
      :data-source="tableData"
      :scroll="{ x: '100%' }"
      :pagination="false"
      size="small"
      @change="pageChange"
      bordered
      v-bind="$attrs.tableProps"
      class="self-table"
    >
      <!--   编辑列显示编辑ICON   -->
      <template #headerCell="{ column, title }">
        <template v-if="column.isEdit === true">
          <div class="head-edit-cont"> <i class="vxe-cell--edit-icon vxe-icon--edit-outline"></i> {
   { title }} </div>
        </template>
        <!--    选择    -->
        <template v-if="column.dataIndex === 'rowSelection'">
          <a-checkbox :indeterminate="indeterminate" v-model:checked="checkAll" @change="onCheckAllChange" />
        </template>
      </template>
      <template #bodyCell="{ column, index, record, text }">
        <!--   序号  非通行时显示序号   -->
        <template v-if="index % 2 === unFullRowIndex && column.dataIndex === 'selfIndex'">
          {
   { tableIndex(index) }}
        </template>
        <!--如果是通行则展示full-row插槽，如果不是通行并且传入了插槽则展示  -->
        <template v-if="column.fullFirst">
          <div class="full-row-cont" v-if="index % 2 === fullRowIndex">
            <slot name="full-row" :row="record"></slot>
          </div>
          <!--   选择列     -->
          <template v-else-if="column.dataIndex === 'rowSelection'">
            <a-checkbox
              name="tableCheckbox"
              class="my-checkbox"
              v-model:checked="record._checked"
              :key="record.id"
              :value="record.id"
              @change="onCheckBoxChange(record)"
            />
          </template>
          <template v-else-if="column.slot">
            <slot :name="column.slot" :row="record" :rowIndex="index"></slot>
          </template>
          <template v-else>{
   { text }}</template>
        </template>
        <!--   如果不是通行、并且传入了插槽，则展示     -->
        <template v-else-if="index % 2 === unFullRowIndex && column.slot">
          <slot :name="column.slot" :row="record" :rowIndex="index"></slot>
        </template>
        <!--   操作     -->
        <template v-if="column.key === 'action'">
          <template v-if="index % 2 === unFullRowIndex">
            <slot name="action" :row="record"></slot>
          </template>
        </template>
      </template>
    </a-table>
    <!--   页码：传入dataSource时不显示页码     -->
    <div class="my-footer" v-if="hasPagination">
      <a-pagination
        size="small"
        :total="total"
        :current="pageNo"
        :page-size="pageSize"
        show-size-changer
        show-quick-jumper
        :show-total="(total) => `共 ${total} 条数据`"
        @change="pageChange"
      />
    </div>
  </component>
</template>
<script lang="ts" setup name="SelfTable">
  import type {
       TableColumnType } from 'ant-design-vue';
  import {
      
    checkColumnsHasExist,
    filterSelfTableColumns,
    filterSelfTableData,
    FullRowType,
    getIndeterminateAndCheckAllStatus,
    getAllCheckedListData,
    useFullRowIndex,
    SelfTableColumnType,
    columnColspanFull,
    indexColumnColspan,
  } from '/@/views/components/SelfTable/selfTableTools';
  import {
       computed, onMounted, reactive, ref, toRaw, watch } from 'vue';

  interface Props {
      
    dataSource?: any[]; // 数据,
    fullRowType: FullRowType; // 同行类型
    fullRowKeyList: any[]; // 展示在同行的数据，组件内自动转换数据
    api?: any;
    hasCheckbox?: boolean;
    hasPagination?: boolean;
    columns: TableColumnType[];
    allTableColumnsNum: number; // 表格列总数量
    isDiv?: boolean;
  }
  const props = defineProps<Props>();

  // fullRowType 通行索引  0代表偶数行为通行，即行下展示描述信息
  const {
       fullRowIndex, unFullRowIndex } = useFullRowIndex(props.fullRowType);

  // 表格基础数据
  let pageNo = ref(1); // 页码
  let pageSize = ref(10); // 页条数
  let total = ref(0); // 总条数
  let sourceData = ref([]); // 接口返回原始数据
  let tableSourceData = ref([]); // 接口返回原始数据中的表格数据
  let tableData = ref([]); // 表格数据
  const hasPagination = ref(true); // 是否显示页码

  const checkColumn: SelfTableColumnType = {
      
    title: ' ',
    dataIndex: 'rowSelection',
    key: Math.random(),
    fixed: 'left',
    align: 'center',
    width: 40,
    customCell: (_, index) => ({
      
      colSpan: columnColspanFull(index, fullRowIndex, props.allTableColumnsNum),
    }),
    fullFirst: props.hasCheckbox,
  };
  const indexColumn: SelfTableColumnType = {
      
    title: '序号',
    key: Math.random(),
    dataIndex: 'selfIndex',
    fixed: 'left',
    align: 'center',
    width: 40,
    customCell: (_, index) => ({
      
      colSpan: indexColumnColspan(index, fullRowIndex, unFullRowIndex, props.allTableColumnsNum, props.hasCheckbox),
    }),
    fullFirst: !props.hasCheckbox,
  };
  let columns = ref<TableColumnType[]>([]);
  columns.value = filterSelfTableColumns(toRaw(props.columns));
  !checkColumnsHasExist(props.columns, 'selfIndex') && columns.value.unshift(indexColumn);
  props.hasCheckbox && !checkColumnsHasExist(props.columns, 'rowSelection') && columns.value.unshift(checkColumn);

  /********* 选择 相关 start ***********/
  let checkAll = ref(false);
  let indeterminate = ref(false);
  let checkedList = ref([]);
  // 全选
  function onCheckAllChange(e: any) {
      
    const checked = e.target.checked;
    tableData.value.map((item) => {
      
      item._checked = checked;
    });
    checkedList.value = checked ? getAllCheckedListData(tableSourceData.value, checkedList.value) : [];
    indeterminate.value = false;
  }
  function onCheckBoxChange(record) {
      
    const index = checkedList.value.findIndex((item) => item.id === record.id);
    if (index > -1) {
      
      checkedList.value.splice(index, 1);
    } else {
      
      checkedList.value.push(record);
    }
  }
  const checkedAlertMessage = computed(() => {
      
    return checkedList.value.length === 0 ? '未选中任何数据' : `已选中 ${
        checkedList.value.length} 条记录(可跨页)`;
  });
  // 监听 选择改变
  watch(() => checkedList.value, reloadCheckStatus, {
      
    immediate: true,
    deep: true,
  });
  function reloadCheckStatus() {
      
    const {
       indeterminateStatus, checkAllStatus } = getIndeterminateAndCheckAllStatus(checkedList.value, tableSourceData.value);
    indeterminate.value = indeterminateStatus;
    checkAll.value = checkAllStatus;
  }
  // 重置选择
  function resetCheckbox() {
      
    onCheckAllChange({
       target: {
       checked: false } });
  }
  // 给数据添加选项字段
  function addCheckedParam(data = []) {
      
    if (!props.hasCheckbox) {
      
      return data;
    }
    let nData = data;
    nData.map((item) => {
      
      const index = checkedList.value.findIndex((check) => item.id === check.id);
      item['_checked'] = index !== -1;
    });
    return nData;
  }
  /********* 选择 相关  end ***********/

  // index序号计算
  const tableIndex = computed(() => (index) => (index + unFullRowIndex) / 2 + fullRowIndex + (pageNo.value - 1) * pageSize.value);

  let searchData = reactive({
      });
  // 搜索 - 传入搜索数据
  function search(sd, reset = true) {
      
    searchData = sd;
    reload(reset);
  }

  // 重载表格
  async function reload(reset = false) {
      
    if (reset) pageNo.value = 1;
    const res = await props.api({
      
      ...searchData,
      pageNo: pageNo.value,
      pageSize: pageSize.value,
    });
    // 保存接口数据
    sourceData.value = res || [];
    tableSourceData.value = addCheckedParam(res.records);
    total.value = res.total || 0;
    tableData.value = addCheckedParam(filterData(res.records));
    reloadCheckStatus();
  }

  /**
   * 修改表格数据
   * @param {number} rowIndex 行索引
   * @param {string} changeKey 改变的字段
   * @param value  要改变的值
   */
  function setTableData(rowIndex: number, changeKey: string, value: any) {
      
    if (tableData.value[rowIndex] === undefined) return;
    if (tableData.value[rowIndex][changeKey] === undefined) return;
    tableData.value[rowIndex][changeKey] = value;
  }

  function filterData(records) {
      
    return filterSelfTableData(records, props.fullRowKeyList || [], fullRowIndex, unFullRowIndex);
  }

  onMounted(() => {
      
    hasPagination.value = props.hasPagination || true;
    if (props.dataSource) {
      
      // hasPagination.value = false;
      sourceData.value = props.dataSource;
      tableSourceData.value = addCheckedParam(props.dataSource);
      tableData.value = addCheckedParam(filterData(props.dataSource));
    } else {
      
      reload(true);
    }
  });

  // 页码改变事件
  function pageChange(pNo, pSize) {
      
    pageNo.value = pNo;
    // 页数改变时，页码设置1
    const reset = pageSize.value !== pSize;
    pageSize.value = pSize;
    reload(reset);
  }

  /**
   * 获取选中数据 - id
   * @return [string | number] 选中数据
   */
  function getChecked(): (string | number)[] {
      
    let checkArr: (string | number)[] = reactive([]);
    let checkDom: any[] = document.querySelectorAll('input[name="tableCheckbox"]:checked') || [];
    checkDom.forEach((check) => {
      
      checkArr.push(check.value);
    });
    return toRaw(checkArr);
  }
  /**
   * 获取选中数据 - row
   * @return [string | number] 选中数据
   */
  function getCheckedRows(): (string | number)[] {
      
    // let checkArr: [] = reactive([]);
    // let checkDom: any[] = document.querySelectorAll('input[name="tableCheckbox"]:checked') || [];
    // let getData = getTableData();
    // checkDom.forEach((check) => {
      
    //   let checkDataRows = getData.find((item) => item.id == check.value);
    //   checkArr.push(checkDataRows ? checkDataRows : {});
    // });
    return toRaw(checkedList.value);
  }
  // 获取当前表格的数据
  function getTableData() {
      
    const tData = tableData.value;
    let realData = [];
    tData.forEach((item, index) => {
      
      if (index % 2 === fullRowIndex) return;
      realData.push({
       ...item, ...tData[index + 1] });
    });
    return realData;
  }
  /**
   * 暴露属性方法
   * @param {function} search 搜索方法
   * @param {function} getChecked 获取已选中数据方法 - id
   * @param {function} getCheckedRows  获取已选中数据方法 - row
   * @param {Array} sourceData 获取接口返回的数据
   * @param {Array} tableSourceData 获取接口返回的数据中表格的数据
   * @param {function} getTableData 获取表格数据
   * @param {function} setTableData 设置表格某行的某个单元格数据
   */
  defineExpose({
      
    search,
    getChecked,
    getCheckedRows,
    sourceData,
    tableSourceData,
    getTableData,
    setTableData,
  });
</script>
<style lang="less" scoped>
  .a-alert-cont {
      
    margin-bottom: 8px;
  }
  .ant-table-striped :deep(.table-striped) td {
      
    background-color: #fafafa;
  }
  :deep(.ant-table-content) {
      
    border-right: 1px solid #f0f0f0;
  }
  :deep(.ant-table-thead) > tr > th,
  :deep(.ant-table-tbody) > tr > td,
  :deep(.ant-table tfoot) > tr > th,
  :deep(.ant-table) tfoot > tr > td {
      
    padding: 4px 8px;
  }
  .my-footer {
      
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
  }
  .my-checkbox {
      
    cursor: pointer;
    width: 16px;
    height: 16px;
  }
  .table-head {
      
    margin-bottom: 8px;
    :deep(.ant-btn) {
      
      margin-right: 8px;
    }
    margin-right: 8px;
  }

  .head-edit-cont {
      
    display: flex;
    align-items: center;
    :deep(.vxe-cell--edit-icon) {
      
      border-color: #606266 !important;
      margin-right: 3px;
    }
  }
  .full-row-cont {
      
    text-align: left;
  }
</style>

selfTableTools.ts

SelfTable组件的依赖工具方法

/**
 * 遍历表格数据 为 SelfTable数据类型
 * @param data 表格源数据
 * @param keys 要放到通行里使用的数据
 * @param fullRowIndex 通行索引
 * @param unFullRowIndex 非通行索引
 */
export const filterSelfTableData = (data: any[], keys: any[], fullRowIndex: number, unFullRowIndex: number): any[] => {
    
  if (keys.length === 0) return [...data, ...data];
  const arr: any[] = [];
  data.map((d) => {
    
    const d2 = {
    };
    keys.map((k) => {
    
      d2[k] = d[k];
    });
    fullRowIndex && arr.push(d);
    d2['id'] = d.id;
    arr.push(d2);
    unFullRowIndex && arr.push(d);
  });
  return arr;
};

// 过滤表单列
export const filterSelfTableColumns = (columns) => {
    
  return columns.filter((item) => item.ifShow === undefined || item.ifShow() === true);
};

// 通行类型 'prev' 前一行 | 'last' 后一行
export type FullRowType = 'prev' | 'last';
export const useFullRowIndex = (type: FullRowType) => {
    
  const fullRowIndex = type === 'prev' ? 0 : 1;
  const unFullRowIndex = type === 'prev' ? 1 : 0;
  return {
     fullRowIndex, unFullRowIndex };
};

// 除第一列外的普通列
export const sharedOnCell = (index, type: FullRowType) => {
    
  // 设置为0时不渲染
  return {
     colSpan: index % 2 === useFullRowIndex(type).fullRowIndex ? 0 : 1 };
};

/**
 * 首位列
 * @param type 通行位置 prev | last
 * @param columnsNum 要合并的行数，也就是总列数，包括操作，不含序号和选择
 * @param index 索引
 */
export const firstSharedOnCell = (type: FullRowType, columnsNum: number, index) => ({
    
  colSpan: index % 2 === useFullRowIndex(type).fullRowIndex ? columnsNum : 1,
});

import {
     TableColumnType } from 'ant-design-vue';
// 表格column类型
export interface SelfTableColumnType extends TableColumnType {
    
  slot?: string;
  fullFirst?: boolean;
  isEdit?: boolean;
  ifShow?: () => boolean;
}

export function checkColumnsHasExist(arr, key): boolean {
    
  return arr.findIndex((item) => item.dataIndex === key) !== -1;
}

/**
 * 全选操作时，将所选数据加入到已选择列表中
 * @param currentPageData 当前页选中数据
 * @param checkedData 已选择的数据
 */
export function getAllCheckedListData(currentPageData: any[], checkedData: any[]) {
    
  const result: any[] = checkedData;
  currentPageData.forEach((item) => {
    
    const index = result.findIndex((c) => c.id === item.id);
    // 不存在 && 添加
    index === -1 && result.push(item);
  });
  return result;
}

interface CheckAllStatus {
    
  indeterminateStatus: boolean;
  checkAllStatus: boolean;
}
/**
 * 获取半选状态及全选状态
 * @param checkedList 已选列表
 * @param currentPageData 当前页数据
 */
export function getIndeterminateAndCheckAllStatus(checkedList, currentPageData): CheckAllStatus {
    
  // 已选数据为空 或者 当前页数据为空
  if (!checkedList.length || !currentPageData.length) {
    
    return {
    
      indeterminateStatus: false,
      checkAllStatus: false,
    };
  }
  // 筛选当前页面数据未再已选列表的数据
  const notCheckedData = currentPageData.filter((item) => {
    
    const index = checkedList.findIndex((c) => c.id === item.id);
    return index === -1;
  });
  return {
    
    indeterminateStatus: notCheckedData.length > 0 && notCheckedData.length < currentPageData.length,
    checkAllStatus: notCheckedData.length === 0,
  };
}

export const columnColspanFull = (index, fullRowIndex, allColumnNum) => (index % 2 === fullRowIndex ? allColumnNum : 1);

export const columnColspanUnFull = (index, unFullRowIndex) => (index % 2 === unFullRowIndex ? 1 : 0);

export const indexColumnColspan = (index, fullRowIndex, unFullRowIndex, allColumnNum, hasCheckbox) => {
    
  return hasCheckbox ? columnColspanUnFull(index, unFullRowIndex) : columnColspanFull(index, fullRowIndex, allColumnNum);
};

可编辑单元格使用：

页面示例：

使用示例：

主要依赖的就是组件中的setTableData方法，根据行index，和key去修改表格里面的数据

<SelfTable
      ref="selfTableRef"
      :has-checkbox="true"
      :data-source="dataSource"
      :full-row-type="fullRowType"
      :columns="selfTableColumns(fullRowType)"
      :full-row-key-list="['desc']"
      :is-div="true"
      :all-table-columns-num="16"
    >
      <template #fileNumberSlot="scope">
        <div class="slot-cont">
          <a-input @change="(e) => selfTableRef.setTableData(scope.rowIndex, 'fileNumber', e.target.value)" />
        </div>
      </template>
      <template #inputSlot="scope">
        <div class="slot-cont">
          <a-input @change="(e) => selfTableRef.setTableData(scope.rowIndex, 'inputValue', e.target.value)" />
        </div>
      </template>
      <template #contractNoSlot="scope">
        <div class="slot-cont">
          <a-select style="width: 100%" @change="(value) => selfTableRef.setTableData(scope.rowIndex, 'contractNo', value)">
            <a-select-option value="jack">Jack</a-select-option>
            <a-select-option value="lucy">Lucy</a-select-option>
          </a-select>
        </div>
      </template>
      <template #full-row="{ row }"> 其他等级： 资源号： 捆绑号：{
   { row.id }}</template>
    </SelfTable>

tableColumns方法需要增加isEdit字段,会显示编辑icon

    {
    
      title: '件数(件)',
      dataIndex: 'fileNumber',
      width: 100,
      customCell: (_, index) => sharedOnCell(index, fullRowType),
      slot: 'fileNumberSlot',
      isEdit: true,
    },
    {
    
      title: '重量(吨)',
      dataIndex: 'inputValue',
      width: 100,
      customCell: (_, index) => sharedOnCell(index, fullRowType),
      slot: 'inputSlot',
      isEdit: true,
    },