vben admin实现表格每一列都是可拖拽改变顺序

项目中用的vben admin是2.8.0 去看vben admin的table组件

antd design vue 的table组件中有个customHeaderCell用来设置头部单元格属性

  import {  nextTick } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  let resetColumns;
  // 定义一个自定义的表头单元格
  const customHeaderCell = (column) => {
    // 返回一个对象，包含拖拽相关的属性和方法
    return {
      // 设置单元格可拖拽
      draggable: true,
      // 拖拽开始时触发的事件
      onDragstart: (e) => {
        // 获取当前拖拽的单元格在columns数组中的索引
        const dragItemIndex = columns.findIndex((c) => c.dataIndex === column.dataIndex);
        // 将索引存储在dataTransfer对象中
        e.dataTransfer?.setData('index', `${dragItemIndex}`);
      },
      // 拖拽进入时触发的事件
      onDragenter: (e) => {
        // 阻止默认行为
        e.preventDefault();
      },
      // 拖拽经过时触发的事件
      onDragover: (e) => {
        // 阻止默认行为
        e.preventDefault();
      },
      // 拖拽结束时触发的事件
      onDrop: (e) => {
        // 阻止默认行为
        e.preventDefault();
        // 获取当前单元格在columns数组中的索引
        const currentIndex = columns.findIndex((c) => c.dataIndex === column.dataIndex);
        // 获取拖拽的索引
        const droppedData = e.dataTransfer?.getData('index');
        // 交换两个单元格的位置
        const x = columns[currentIndex];
        columns[currentIndex] = columns[Number(droppedData)];
        columns[Number(droppedData)] = x;
        // 重置columns数组
        resetColumns(columns);
      },
    };
  };
  const columns = [
  {
    title: '商品名称',
    key: 'goodsName',
    dataIndex: 'goodsName',
    customHeaderCell,
  },
   {
    title: '商品数量',
    key: 'goodsNumber',
    dataIndex: 'goodsNumber',
    customHeaderCell,
  },
   {
    title: '商品价格',
    key: 'goodsPrice',
    dataIndex: 'goodsPrice',
    customHeaderCell,
  },
];

const getColumns = (cbFn) => {
  resetColumns = cbFn;
  return columns;
};
nextTick(() => {
    setColumns(getColumns(setColumns));
  });
 const [registerTable, { reload, setColumns, getForm, getSelectRows }] = useTable({
    api: apiProxy,   //请求接口
    // columns,    
    formConfig: {
      schemas: searchFormSchema,    //表格上面搜索配置项
      baseColProps: {},
    },
  });