业务需求:

1.表头自定义

2.表格伸缩列自定义

3.字段长度自适应伸缩列,超过宽度设置自动省略,popover气泡卡牌显示全部字段

4.表格排序自定义

5.可展开数据通过操作栏展开

自定义表头:

<template>
  <a-modal
      :visible="modelValue"
      title="自定义表头"
      :destroyOnClose="true"
      :keyboard="false"
      :maskClosable="false"
      width="800px"
      @ok="handleOk"
      @cancel="handleCancel"
  >
    <div class="column-selector-grid">
      <div class="selector-actions">
        <a-button @click="resetToDefault">恢复默认</a-button>
        <a-button @click="selectAll">全选</a-button>
        <a-button @click="clearAll">清空</a-button>
      </div>
      <div class="grid-container">
        <draggable
            v-model="internalColumns"
            group="columns"
            item-key="dataIndex"
            class="grid-layout"
            :disabled="props.disabled"
            @start="onDragStart"
            @end="onDragEnd"
            :move="onMove">
          <template #item="{ element }">
            <div
                class="grid-item"
                :class="{
                'required-item': element.required,
                'selected-item': element.visible,}">
              <div class="drag-handle" >
                <drag-outlined />
              </div>
              <div class="item-content">
                <a-checkbox
                    v-model:checked="element.visible"
                    :disabled="element.required "
                    class="content-checkbox"
                >
                  <span class="content-title">
                    {{ element.title }}
                    <a-tooltip v-if="element.tip" :title="element.tip">
                      <question-circle-outlined class="tip-icon" />
                    </a-tooltip>
                  </span>
                </a-checkbox>
              </div>
            </div>
          </template>
        </draggable>
      </div>
      <div class="fixed-columns-info">
        <p class="info-text">
          <info-circle-outlined class="info-icon" />
          <strong>固定表头申明：</strong>
          <span class="fixed-first-text">序号</span> 固定显示在第一位，
          <span class="fixed-last-text">操作</span> 固定显示在最后一位，以及其他所有被固定的表头都不能取消选择或调整位置。
        </p>
      </div>
    </div>
  </a-modal>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue';
import { QuestionCircleOutlined, DragOutlined, InfoCircleOutlined } from '@ant-design/icons-vue';
import draggable from 'vuedraggable';

// 固定列配置
const FIXED_COLUMNS = {
  FIRST: 'no',      // 序号列固定在第一位
  LAST: 'action'    // 操作列固定在最后一位
};

const props = defineProps({
  allColumns: Array,        // 所有可用列，按照 tableColumns 顺序
  defaultColumns: Array,    // 当前选中的列
  modelValue: Boolean,       // 控制弹窗显示
  disabled:{
    type:Boolean,
    default:false
  }
});

const emit = defineEmits(['update:modelValue', 'confirm','closeSelector']);

// 内部维护的列数据
const internalColumns = ref([]);

// 拖拽状态
const isDragging = ref(false);
const draggedElement = ref(null);

// 拖拽开始事件
const onDragStart = (evt) => {
  const draggedItem = evt.item;
  const draggedIndex = evt.oldIndex;
  const draggedData = internalColumns.value[draggedIndex];
  // 检查是否是固定列
  if (draggedData.required ) {
    // 阻止拖拽固定列
    evt.preventDefault();
    return;
  }
  isDragging.value = true;
  draggedElement.value = draggedData;
};

// 拖拽结束事件
const onDragEnd = (evt) => {
  isDragging.value = false;
  draggedElement.value = null;
  // 延迟执行位置恢复，确保拖拽完全结束
  nextTick(() => {
    ensureFixedColumnsPosition();
  });
};

// 拖拽移动事件
const onMove = (evt) => {
  const draggedItem = evt?.dragged.__draggable_context?.element;
  const targetIndex = evt.draggedContext.futureIndex;
  // 检查被拖动列是否是固定列
  if (draggedItem?.required ) {
    // 阻止拖拽固定列
    return false;
  }
  // 检查目标是否是固定列
  const targetItem = internalColumns.value[targetIndex];
  if (targetItem && targetItem.required) {
    // 阻止拖拽到固定列
    return false;
  }
  // 智能位置调整：确保拖拽后固定列位置仍然正确
  const adjustedTargetIndex = adjustTargetIndex(targetIndex);
  if (adjustedTargetIndex !== targetIndex) {
    // 如果目标位置需要调整，更新拖拽目标
    evt.draggedContext.futureIndex = adjustedTargetIndex;
  }
  // 允许正常列在固定列之间自由拖拽
  return true;
};

// 智能调整目标位置，确保不破坏序号和操作的位置
const adjustTargetIndex = (targetIndex) => {
  const columns = internalColumns.value;
  // 找到序号和操作的位置
  const noIndex = columns.findIndex(col => col.dataIndex === FIXED_COLUMNS.FIRST);
  const actionIndex = columns.findIndex(col => col.dataIndex === FIXED_COLUMNS.LAST);
  // 如果目标位置是序号列位置，调整到序号列后面
  if (targetIndex === 0) {
    return 1;
  }
  // 如果目标位置是操作列位置，调整到操作列前面
  if (targetIndex === columns.length - 1) {
    return columns.length - 2;
  }
  // 如果目标位置在序号列之前，调整到序号列后面
  if (targetIndex < noIndex) {
    return noIndex + 1;
  }
  // 如果目标位置在操作列之后，调整到操作列前面
  if (targetIndex > actionIndex) {
    return actionIndex - 1;
  }
  return targetIndex;
};

// 确保固定列在正确位置
const ensureFixedColumnsPosition = () => {
  const columns = [...internalColumns.value];
  let hasChanges = false;

  // 确保序号列在第一位
  const noColumn = columns.find(col => col.dataIndex === FIXED_COLUMNS.FIRST);
  if (noColumn) {
    const noIndex = columns.indexOf(noColumn);
    if (noIndex !== 0) {
      columns.splice(noIndex, 1);
      columns.unshift(noColumn);
      hasChanges = true;
    }
  }

  // 确保操作列在最后一位
  const actionColumn = columns.find(col => col.dataIndex === FIXED_COLUMNS.LAST);
  if (actionColumn) {
    const actionIndex = columns.indexOf(actionColumn);
    if (actionIndex !== columns.length - 1) {
      columns.splice(actionIndex, 1);
      columns.push(actionColumn);
      hasChanges = true;
    }
  }

  // 如果有变化，更新列顺序
  if (hasChanges) {
    internalColumns.value = [...columns];
  }
};

// 初始化列数据，保持 tableColumns 的顺序
const initColumns = () => {
  // 按照 allColumns 的顺序初始化
  internalColumns.value = props.allColumns.map(col => ({
    ...col,
    visible: props.defaultColumns.includes(col.dataIndex) || col.required
  }));
  // 确保固定列在正确位置
  ensureFixedColumnsPosition();
};

// 恢复默认
const resetToDefault = () => {
  initColumns();
};

// 全选
const selectAll = () => {
  internalColumns.value.forEach(col => {
    col.visible = true;
  });
};

// 清空（除了必需列和固定列）
const clearAll = () => {
  internalColumns.value.forEach(col => {
    if (!col.required ) {
      col.visible = false;
    }
  });
};

// 确认保存
const handleOk = () => {
  // 按照当前顺序返回可见列的 dataIndex 数组
  const visibleColumns = internalColumns.value
      .filter(col => col.visible)
      .map(col => col.dataIndex);

  emit('confirm', visibleColumns);
  emit('update:modelValue', false);
};

const handleCancel = () => {
  if(props.disabled){
    internalColumns.value.forEach(col => {
      col.visible = props.defaultColumns.includes(col.dataIndex) || col.required ;
    });
  }

  emit('update:modelValue', false);
  emit('closeSelector');
};

// 监听 props 变化重新初始化
watch(() => props.allColumns, initColumns, { immediate: true });
watch(() => props.defaultColumns, () => {
  internalColumns.value.forEach(col => {
    col.visible = props.defaultColumns.includes(col.dataIndex) || col.required ;
  });
});

// 监听内部列顺序变化，确保固定列位置正确
watch(() => internalColumns.value, (newColumns) => {
  if (newColumns && newColumns.length > 0) {
    // 检查固定列位置
    const noIndex = newColumns.findIndex(col => col.dataIndex === FIXED_COLUMNS.FIRST);
    const actionIndex = newColumns.findIndex(col => col.dataIndex === FIXED_COLUMNS.LAST);

    // 如果固定列位置不正确，立即恢复
    if (noIndex !== 0 || actionIndex !== newColumns.length - 1) {
      nextTick(() => {
        ensureFixedColumnsPosition();
      });
    }
  }
}, { deep: true });
</script>

<style scoped>
.column-selector-grid {
  padding: 12px;
}

.selector-actions {
  margin-bottom: 16px;
  display: flex;
  gap: 8px;
}

.grid-container {
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  padding: 12px;
  background: #fafafa;
  margin-bottom: 16px;
}

.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.grid-item {
  position: relative;
  height: 80px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: #fff;
  cursor: move;
  transition: all 0.2s;
  padding: 8px;
  overflow: hidden;
}

.grid-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.grid-item.required-item {
  background-color: #f6ffed;
}

.grid-item.selected-item {
  background-color: #e6f7ff;
}

.drag-handle {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  border-radius: 2px;
  color: #666;
  cursor: move;
  z-index: 1;
}

.grid-item.required-item .drag-handle {
  background: #d9f7be;
}

.item-content {
  height: 100%;
  display: flex;
  align-items: center;
}

.content-checkbox {
  width: 100%;
  display: flex;
  align-items: center;
  margin: 0;
  padding-right: 20px;
}

.content-checkbox >>> .ant-checkbox {
  flex-shrink: 0;
}

.content-checkbox >>> .ant-checkbox + span {
  display: flex;
  align-items: center;
  flex: 1;
  padding-right: 4px;
  white-space: normal;
}

.content-title {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  line-height: 1.4;
  word-break: break-word;
  text-align: left;
}

.tip-icon {
  margin-left: 4px;
  color: #999;
  font-size: 12px;
}

.fixed-columns-info {
  background-color: #f6ffed;
  border: 1px solid #b7eb8f;
  border-radius: 4px;
  padding: 12px;
}

.info-text {
  margin: 0;
  font-size: 12px;
  color: #666;
  line-height: 1.5;
}

.info-icon {
  margin-right: 6px;
  color: #52c41a;
}

.fixed-first-text {
  color: #52c41a;
  font-weight: bold;
}

.fixed-last-text {
  color: #1890ff;
  font-weight: bold;
}
</style>

表格封装:

<template>
  <div class="list-page">
    <div>
      <slot name="header"/>
    </div>
    <div>
      <a-table
          bordered
          row-key="id"
          size="small"
          ref="tableRef"
          :loading="loading"
          :columns="currentTableColumns"
          :data-source="dataSource"
          :expand-row-by-click="false"
          :row-selection="rowSelection"
          :expandIconColumnIndex="-1"
          @expand="handleExpand"
          :expanded-row-keys="expandedRowKeys"
          @resizeColumn="handleResizeColumn"
          :scroll="{ x: '120%', y: 'calc(100vh - 375px)' }"
          :pagination="false">

        <!-- 动态插槽处理 -->
        <template v-for="slotName in Object.keys($slots)" #[slotName]="scope" :key="slotName">
          <slot :name="slotName" v-bind="scope" />
        </template>

        <!--通用bodyCell插槽封装-->
        <template #bodyCell="{text,record,column,index}">
          <!--  先检查是否有自定义的bodyCell插槽-->
          <template v-if="$slots.bodyCell">
            <slot name="bodyCell" :text="text" :record="record" :column="column" :index="index"></slot>
          </template>
          <!-- 无自定义的bodyCell插槽时的默认处理逻辑-->
          <template v-else>
            {{ formatCellText(text,record,column) }}
          </template>
        </template>

        <!-- 通用操作列 -->
        <template #action="{ record, index }">
          <slot name="action" :record="record" :index="index">
            <!-- 默认操作列 -->
          </slot>
        </template>

        <!-- 扩展行插槽 -->
        <template #expandedRowRender="{ record, index }">
          <slot name="expandedRowRender" :record="record" :index="index" />
        </template>

      </a-table>
      <div class="pagination-wrapper">
        <a-pagination
            show-size-changer
            size="small"
            v-model:current="pagination.page"
            v-model:page-size="pagination.pageSize"
            :show-total="(total) => `共 ${total} 条`"
            :total="pagination.total"
            :pageSizeOptions="['100', '200', '300', '500']"
            @change="onChangePage"
        >
        </a-pagination>
      </div>
    </div>

    <!--   自定义表头模态框-->
    <ColumnSelector
        :visible="showColumnSelector"
        :all-columns="enhancedColumns"
        :default-columns="selectedColumns"
        @confirm="handleColumnConfirm"
        @closeSelector="closeSelector"
    />
  </div>
</template>

<script setup>
import {computed, h, nextTick, onMounted, onUnmounted, onUpdated, reactive, ref} from "vue";
import {settingStore} from "../../store/index.js";
import {storeToRefs} from "pinia";
import ColumnSelector from "../../components/ColumnsSelector/index.vue";
import {debounce, deepClone} from "../../utils/util.js";
const settingStoreRef = settingStore();
const { tableOrderByName, tableAscOrDescOrNomal } = storeToRefs(settingStoreRef)
import customizeHeaderApi from '../../api/CustomizeHeader/index.js'
import {message} from "ant-design-vue";
import {useRoute} from "vue-router";

let tableRef = ref(null)
const props = defineProps({
  //表格加载状态
  loading:Boolean,
  showColumnSelector:Boolean,
  rowSelection: {
    type: Object
  },
  pagination:{
    type: Object,
    default: { },
  },
  //需要排序的表格标题
  sortTableList:{
    type: Array,
    default: [],
  },
  //补充必需的列
  requiredColumns:{
    type: Array,
    default: [],
  },
  expandedRowKeys:{
    type: Array,
    default: [],
  },
  columns:Array,
  dataSource:{
    type: Array,
    default: [],
  },
})
const route = useRoute();

const emit = defineEmits(['onChangePage','closeSelector','resetPage','columnResized'])

//自定义表头拉伸
const handleResizeColumn=(w, col)=>{
  col.width = w;
  // 强制表格重新渲染
  nextTick(() => {
    tableRef.value?.$forceUpdate?.();
  })
  debounceResizeColumn({
    dataIndex: col.dataIndex,
    width: w,
    routePath: route.path
  })
}
const debounceResizeColumn = debounce((payload)=>{
  emit('columnResized',payload)
  checkAllCellsOverflow();
},500)

let DEFAULT_VISIBLE_COLUMNS = props.columns.map((item)=>{
  return item.dataIndex
})
const handleExpand = (expanded, record) => {
  emit('handleExpand',expanded, record)
};

const onChangePage=(data)=>{
  emit('onChangePage', data)
}
const closeSelector=()=>{
  emit('closeSelector')
}
//排序
// 当前排序状态
const currentSorter = ref({
  field: tableOrderByName.value,
  order: tableAscOrDescOrNomal.value ?
      (tableAscOrDescOrNomal.value === '0' ? 'ascend' : 'descend') :
      null
});
// 生成带有自定义排序图标的列配置
const currentSortTableColumns = computed(() => {
  return props.columns.map(col => {
    if (props.sortTableList.includes(col.dataIndex)) {
      const isCurrentSorted = currentSorter.value.field === col.dataIndex;
      const sortUpActive = isCurrentSorted && currentSorter.value.order === 'ascend';
      const sortDownActive = isCurrentSorted && currentSorter.value.order === 'descend';
      return {
        ...col,
        // 禁用 Ant Design 的默认排序图标
        sorter: false,
        // 使用自定义标题渲染
        title: () => h('div', {
          class: 'sortable-header',
          onClick: (event) => {
            handleHeaderClick(col.dataIndex, event);
          }
        }, [
          h('span', {
            class: 'header-title',
          }, col.title),
          h('div', {
            class: 'sort-icons',
            style: 'display: flex; flex-direction: column; margin-left: 4px; line-height: 1;',
            onClick: (event) => {
              // 阻止事件冒泡，排序图标有自己的点击事件
              event.stopPropagation();
            }
          }, [
            // 升序三角形图标（正三角）
            h('div', {
              class: `sort-icon sort-up ${sortUpActive ? 'active' : ''}`,
              onClick: () => handleSortClick(col.dataIndex, 'ascend')
            }),
            // 降序三角形图标（倒三角）
            h('div', {
              class: `sort-icon sort-down ${sortDownActive ? 'active' : ''}`,
              onClick: () => handleSortClick(col.dataIndex, 'descend')
            })
          ])
        ])
      };
    }
    return col;
  });
});
// 处理排序图标点击
const handleSortClick = (field, order) => {
  // 如果点击的是当前排序字段且当前已经是该排序方式，则取消排序
  if (currentSorter.value.field === field && currentSorter.value.order === order) {
    settingStoreRef.$patch({
      tableOrderByName: undefined,
      tableAscOrDescOrNomal: undefined
    });
    currentSorter.value = {
      field: undefined,
      order: null
    };
  } else {
    // 设置新的排序
    const sortOrder = order === 'ascend' ? '0' : '1';
    settingStoreRef.$patch({
      tableOrderByName: field,
      tableAscOrDescOrNomal: sortOrder
    });
    currentSorter.value = {
      field: field,
      order: order
    };
  }
  // 重置页码并重新加载数据
  emit('resetPage')
};
// 处理列标题点击（点击标题其他位置）
// 处理表头点击
const handleHeaderClick = (field, event) => {
  const target = event.target;
  // 判断是否点击了排序图标区域
  const isSortIcon = target.closest('.sort-icons') ||
      target.classList.contains('sort-icon') ||
      target.classList.contains('sort-up') ||
      target.classList.contains('sort-down') ||
      target.tagName === 'DIV' && (
          target.style.borderLeft.includes('transparent') ||
          target.style.borderRight.includes('transparent')
      );

  // 如果点击的是排序图标区域，不处理（由 handleSortClick 处理）
  if (isSortIcon) {
    return;
  }
  // 获取当前列的排序状态
  const isCurrentColumn = currentSorter.value.field === field;
  const isAscending = currentSorter.value.order === 'ascend';
  const isDescending = currentSorter.value.order === 'descend';
  if (isCurrentColumn) {
    // 如果当前列已经是排序状态，点击表头其他区域取消排序
    if (isAscending || isDescending) {
      settingStoreRef.$patch({
        tableOrderByName: undefined,
        tableAscOrDescOrNomal: undefined
      });
      currentSorter.value = {
        field: undefined,
        order: null
      };
      emit('resetPage')
    }
  } else {
    // 如果当前列没有排序，点击表头设置为默认升序
    settingStoreRef.$patch({
      tableOrderByName: field,
      tableAscOrDescOrNomal: '0' // 0 表示升序
    });
    currentSorter.value = {
      field: field,
      order: 'ascend'
    };
    emit('resetPage')
  }
};
function initTableOrder(){
  settingStoreRef.$patch({
    tableOrderByName:undefined,
    tableAscOrDescOrNomal:undefined
  })
  currentSorter.value = {
    field: undefined,
    order: null
  };
}

//自定义表头 start
const visibleColumns = ref([...DEFAULT_VISIBLE_COLUMNS]);
let allDefaultColumns = ref([])
// 获取实际显示的表格列
const currentTableColumns = computed(() => {
  const allColumns = currentSortTableColumns.value;
  // 过滤出需要显示的列，并保持顺序
  return visibleColumns.value
      .map(dataIndex => allColumns.find(col => col.dataIndex === dataIndex))
      .filter(Boolean);
});

// 当前选中的列
const selectedColumns = ref([...DEFAULT_VISIBLE_COLUMNS]);
const selectorColumns = computed(() => {
  // 过滤出需要显示的列，并保持顺序
  return allDefaultColumns.value
      .map(dataIndex => props.columns.find(col => col.dataIndex === dataIndex))
      .filter(Boolean);
});
function getColumnTip(dataIndex) {
  let tips = {};
  props.columns.forEach((item)=>{
    tips[item.dataIndex] =  item.title;
  })
  return tips[dataIndex];
}
// 增强列信息
const enhancedColumns = computed(() => {
  let columns = selectorColumns.value;
  // 确保顺序与 tableColumns 一致
  return columns.map(col => ({
    ...col,
    tip: getColumnTip(col.dataIndex),
    required: props.requiredColumns.includes(col.dataIndex)
  }));
});
// 保存列设置
async function handleColumnConfirm(columns) {
  try {
    // 更新visibleColumns和selectedColumns
    visibleColumns.value = columns;
    selectedColumns.value = columns;
    // 接口保存
    await customizeHeaderApi.update({
      pageRoutePath: route.path,
      tableColumsNameLst: columns
    })
    emit('closeSelector');
    message.success('表头设置已保存');
  } catch (e) {
    console.error('保存列设置失败', e);
    message.error('保存表头设置失败');
  }
}
// 加载保存的设置
async function loadColumnPreference() {
  try {
    //获取已保存的设置
    const res = await customizeHeaderApi.get({pageRoutePath:route?.path});
    const saved = res.data?.tableColumsNameLst;
    // 验证并处理保存的列设置
    if (saved && saved.length > 0) {
      // 1. 过滤掉不存在的列
      const validColumns = saved.filter(dataIndex =>
          props.columns.some(col => col.dataIndex === dataIndex)
      );
      // 2. 补充必需的列
      props.requiredColumns.forEach(col => {
        if (!validColumns.includes(col)) {
          validColumns.unshift(col); // 必需列放在前面
        }
      });
      visibleColumns.value = validColumns;
      //必须列
      let requiredColumns = deepClone(props.columns);
      requiredColumns = requiredColumns.filter((col)=>props.requiredColumns.includes(col.dataIndex));
      //已保存的必须列
      let savedNonRequiredColumns = saved.filter(dataIndex => !props.requiredColumns.includes(dataIndex)).map(dataIndex=>
          props.columns.find(col=> col.dataIndex == dataIndex)).filter(Boolean);
      //未保存的列
      let unsavedCols = props.columns.filter(col=>!props.requiredColumns.includes(col.dataIndex) && !saved.includes(col.dataIndex));
      const orderColumns = [...requiredColumns,...savedNonRequiredColumns,...unsavedCols];
      allDefaultColumns.value = orderColumns.map(col=>col.dataIndex);
    } else {
      // 使用默认值
      visibleColumns.value = [...DEFAULT_VISIBLE_COLUMNS];
      allDefaultColumns.value = [...DEFAULT_VISIBLE_COLUMNS];
    }
    // 更新selectedColumns（用于ColumnSelector）
    selectedColumns.value = [...visibleColumns.value];
  } catch (e) {
    console.error('加载列设置失败', e);
    visibleColumns.value = [...DEFAULT_VISIBLE_COLUMNS];
    selectedColumns.value = [...DEFAULT_VISIBLE_COLUMNS];
  }
}
//自定义表头 end

// 格式化单元格文本
const formatCellText = (text, record, column) => {
  if (typeof text === 'object') {
    return JSON.stringify(text)
  }
  return text || ''
}
// 检查文本是否溢出
const overflowMap = reactive(new Map());
const isOverflow = (columnKey, rowKey) => {
  return overflowMap.get(`${rowKey}-${columnKey}`) || false;
};
const checkAllCellsOverflow =()=>{
  nextTick(()=>{
    const cells = document.querySelectorAll('.table-cell');
    cells.forEach((cell)=>{
      const columnKey = cell.getAttribute('data-column-key');
      const rowKye = cell.getAttribute('data-row-key');
      const key = `${rowKye}-${columnKey}`;
      const isOverFlow = cell.scrollWidth > cell.clientWidth;
      overflowMap.set(key,isOverFlow);
    })
  })
}

onMounted(()=>{
  initTableOrder();
  loadColumnPreference();
  // 监听窗口变化
  window.addEventListener('resize', checkAllCellsOverflow);
})
onUpdated(()=>{
  checkAllCellsOverflow();
})
// 清理事件监听
onUnmounted(() => {
  window.removeEventListener('resize', checkAllCellsOverflow);
});
// 暴露方法给父组件
defineExpose({
  initTableOrder,
  isOverflow,
});
</script>

<style scoped>
.pagination-wrapper {
  text-align: right;
  margin-top: 10px;
}
</style>

/**  防抖函数，规定时间内连续出发的函数只执行最后一次 */
function debounce(func, wait, immediate) {
    let timeout; // 定义一个计时器变量，用于延迟执行函数
    return function (...args) { // 返回一个包装后的函数
        const context = this; // 保存函数执行上下文对象
        const later = function () { // 定义延迟执行的函数
            timeout = null; // 清空计时器变量
            if (!immediate) func.apply(context, args); // 若非立即执行，则调用待防抖函数
        };
        const callNow = immediate && !timeout; // 是否立即调用函数的条件
        clearTimeout(timeout); // 清空计时器
        timeout = setTimeout(later, wait); // 创建新的计时器，延迟执行函数
        if (callNow) func.apply(context, args); // 如果满足立即调用条件，则立即执行函数
    };
}

import { defineStore } from "pinia";

export const columWidthStore = defineStore('columnWidthStore', {
    state: () => ({
        columnWidthList: [],
    }),
    actions: {
        setColumnList(record){
            const { routePath,dataIndex,width } = record;
            let routeConfig = this.columnWidthList.find(item=>item.routePath == routePath);
            if(routeConfig){
                const columnConfig = routeConfig?.columnList.find(item=>item.dataIndex == dataIndex);
                if(columnConfig){
                    columnConfig.width = width;
                }else{
                    routeConfig.columnList.push({dataIndex,width})
                }
            }else{
                this.columnWidthList.push({
                    routePath,columnList:[{dataIndex,width}]
                })
            }

        },
        getRouteColumnWidths(routePath) {
            const routeConfig = this.columnWidthList.find(item=>item.routePath == routePath);
            if(!routeConfig)return [];
            return routeConfig.columnList;
        },
        deleteRouteConfig(routePath) {
            let index = this.columnWidthList.findIndex((item)=>{return item.routePath == routePath});
            this.columnWidthList.splice(index,1);
        },
        deleteAllRoute(){
            this.columnWidthList = []
        }

    },
    getters: {

    },
    persist: {
        enabled: true,
        // 自定义持久化参数
        strategies: [
            {
                // 自定义key,默认就是仓库的key
                key: "columWidthStore",
                // 自定义存储方式，默认sessionStorage
                storage: localStorage,
                // 指定要持久化的数据，默认所有 state 都会进行缓存，可以通过 paths 指定要持久化的字段，其他的则不会进行持久化。
                paths: [
                    "columnWidthList",
                ],
            }
        ],
    },
})

import { defineStore } from "pinia";
import { deepClone } from "../../utils/util.js";
const customTitlesStr = sessionStorage.getItem(import.meta.env.VITE_APP_TBAS_TITLES_KEY)
const customTitles = (customTitlesStr && JSON.parse(customTitlesStr)) || []
export const settingStore = defineStore('settingStore', {
    state: () => ({
        isMobile: false,
        visible: false,
        pageMinHeight: 0,
        tableOrderByName:undefined,
        tableAscOrDescOrNomal:undefined,
        menuData: [],
        menuList: {},
        activeValue: '',
        activatedFirst: undefined,
        customTitles,
    }),
    actions: {
        reset() {
            this.isMobile = false;
            this.tableOrderByName = undefined;
            this.tableAscOrDescOrNomal = undefined;
            this.visible = false;
            this.pageMinHeight = 0;
            this.menuData = [];
            this.menuList = {};
            this.activeValue = '';
            this.activatedFirst = undefined;       
            this.customTitles = customTitles;
        },
        setDevice(state, isMobile) {
            state.isMobile = isMobile
        },
        setVisible(state, visible) {
            state.visible = visible
        },
        setMenuValue(value) {
            this.menuData.push(value)
        },

    },
    getters: {
 
    },
    persist: {
        enabled: true,
        // 自定义持久化参数
        strategies: [
            {
                // 自定义key,默认就是仓库的key
                key: "settingStore",
                // 自定义存储方式，默认sessionStorage
                storage: localStorage,
                // 指定要持久化的数据，默认所有 state 都会进行缓存，可以通过 paths 指定要持久化的字段，其他的则不会进行持久化。
                paths: [
                    "menuData",
                    "activeValue",
                    "menuList",
                    "tableOrderByName",
                    "tableAscOrDescOrNomal"
                ],
            }
        ],
    },
})

组件使用:

<template>
  <div>
    <customizeTable
        ref="customizeTableRef"
        :loading="loading"
        :columns="tableColumns"
        :pagination="pagination"
        :data-source="dataSource"
        :requiredColumns="requiredColumns"
        :sortTableList="sortTableList"
        :showColumnSelector="showColumnSelector"
        :expandedRowKeys="expandedRowKeys"
        @onChangePage="onChangePage"
        @closeSelector="closeSelector"
        @expand="handleExpand"
        @resetPage="resetPage"
        @columnResized="columnResized"
    >
      <template #header>
        <div style="display: flex;margin-bottom: 10px">
          <span>测试：</span>
          <a-input size="small" style="width:120px;margin-right: 4px" v-model:value="testValue" ></a-input>
          <a-button size="small" @click="testValue = undefined">清空</a-button>
        </div>
      </template>
      <template #bodyCell="{ text, record, column }">
        <template v-if="overFlowColumns.includes(column.dataIndex)">
          <div class="table-cell"
               :data-row-key="record.key"
               :data-column-key="column.dataIndex"
               @dblclick="handleCellDoubleClick(record, column)">
            <a-popover  placement="leftBottom" v-if="getCellOverflow(column.dataIndex, record.key)" :content="record[column.dataIndex]">
              <span> {{ text }}</span>
            </a-popover>
            <div v-else>
              {{ text }}
            </div>
          </div>
        </template>
        <template v-if="column.dataIndex === 'action'">
          <a-dropdown placement="bottom" >
            <a class="ant-dropdown-link" @click.prevent>
              操作
            </a>
            <template #overlay>
              <a-menu class="menu-active-background-color">
                <a-menu-item >
                  <a-button
                      size="small"
                      @click="toggleExpand(record.id)"
                      style="padding: 0 4px;"
                  >
                    {{ expandedRowKeys.includes(record.id) ? '收起' : '详情' }}
                  </a-button>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </template>
      </template>

      <template #expandedRowRender="{ record }">
        <div class="expanded-style">
          <a-descriptions class="mt-10" title="详细信息" bordered :column="2">
            <a-descriptions-item :contentStyle="contentColor" label="1">{{record.one}}</a-descriptions-item>
            <a-descriptions-item :contentStyle="contentColor" label="2">{{record.two}}</a-descriptions-item>
            <a-descriptions-item :contentStyle="contentColor" label="3">{{record.three}}</a-descriptions-item>
            <a-descriptions-item :contentStyle="contentColor" label="4">{{record.four}}</a-descriptions-item>
            <a-descriptions-item :contentStyle="contentColor" label="5">{{record.five}}</a-descriptions-item>
            <a-descriptions-item :contentStyle="contentColor" label="6" >{{record.six}}</a-descriptions-item>
          </a-descriptions>
        </div>
      </template>
    </customizeTable>
  </div>
</template>
<script setup>
import { onMounted,  ref} from "vue";
import {columWidthStore} from "../src/store/index.js";
import customizeTable from './components/CustomizeTable/index.vue'
import {useRoute} from "vue-router";
import {copyToClipboard} from './utils/util.js'
let route = useRoute();
let customizeTableRef = ref(null)
let loading = ref(false)
let testValue = ref('')
let contentColor = ref({
  backgroundColor:'#fff'
});
let tableColumns = ref([
  {
    title: "序号",
    dataIndex: "no",
    width: 46,
    fixed:'left',
    customRender: ({index}) => `${index + 1}`,
  },
  {
    title: "1",
    dataIndex: "one",
    width: 80,
    key:'one',
    resizable: true,
    ellipsis:true,
  },
  {
    title: "2",
    dataIndex: "two",
    width: 80,
    key:'one',
    resizable: true,
    ellipsis:true,
  },
  {
    title: "3",
    dataIndex: "three",
    width: 80,
    key:'one',
    resizable: true,
    ellipsis:true,
  },
  {
    title: "4",
    dataIndex: "four",
    width: 80,
    key:'one',
    resizable: true,
    ellipsis:true,
  },
  {
    title: "5",
    dataIndex: "five",
    width: 80,
    key:'one',
    resizable: true,
    ellipsis:true,
  },
  {
    title: "6",
    dataIndex: "six",
    width: 80,
    key:'one',
    resizable: true,
    ellipsis:true,
  },
  {
    title: "操作",
    dataIndex: "action",
    fixed:'right',
    key:'action',
    width: 50,
  },
])
let overFlowColumns = tableColumns.value.filter((item)=>!['no','action'].includes(item.dataIndex)).map((item)=>item.dataIndex);
let dataSource = ref([
  {one:'111',two:'2222',three:'333',four:'444444444444444444444444444444444444444',five:'555',six:'666',id:1,key:1111}
])
const pagination = ref({
  page: 1,
  pageSize: 10,
  total: 0,
  size: "default",
});
let requiredColumns = ref(['no','one','two'])
let sortTableList = ref(['one','two','three'])
let showColumnSelector = ref(false)
function handleCellDoubleClick(record, column) {
  const text = record[column.dataIndex];
  copyToClipboard(text);
}
const onChangePage = (data) => {
  pagination.value.page = data;
  // getList();
};
const resetPage=()=>{
  pagination.value.page = 1;
  // getList();
}
const closeSelector=()=>{
  showColumnSelector.value = false;
}

/* 表格详情展开关闭 start */
// 添加展开行的状态管理
let expandedRowKeys = ref([]);
// 切换展开状态的方法
const toggleExpand = (id) => {
  const index = expandedRowKeys.value.indexOf(id);
  if (index > -1) {
    // 如果已经展开，则关闭
    expandedRowKeys.value.splice(index, 1);
  } else {
    // 如果未展开，则展开并关闭其他已展开的行
    expandedRowKeys.value = [id];
  }
};
// 处理表格展开事件
const handleExpand = (expanded, record) => {
  if (expanded) {
    // 展开时关闭其他行
    expandedRowKeys.value = [record.id];
  } else {
    // 收起时移除
    const index = expandedRowKeys.value.indexOf(record.id);
    if (index > -1) {
      expandedRowKeys.value.splice(index, 1);
    }
  }
};
/* 表格详情展开关闭 end */

const columStore = columWidthStore();
const columnResized=(record)=>{
  columStore.setColumnList({
    routePath: record.routePath,
    dataIndex: record.dataIndex,
    width: record.width,
  });

}
const initColumnWidth=()=>{
  let temp = columStore.getRouteColumnWidths(route?.path)
  if(temp?.length){
    tableColumns.value.forEach((el)=>{
      let index = temp.findIndex(item=>item.dataIndex == el.dataIndex);
      if(index>=0)el.width = temp[index].width;
    })
  }
}
const getCellOverflow = (columnKey, rowKey) => {
  if (!customizeTableRef.value?.isOverflow) {
    console.warn('无法访问子组件的 isOverflow 方法');
    return false;
  }
  try {
    return customizeTableRef.value.isOverflow(columnKey, rowKey);
  } catch (error) {
    console.error('调用 isOverflow 方法出错:', error);
    return false;
  }
};
onMounted(()=>{
  initColumnWidth();
})

</script>
<style scoped>
.table-cell {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>