vue3 + ts el-table表格序号倒序

在 Vue3 中结合 TypeScript 使用 Element UI 的 `el-table` 表格并实现序号倒序，你可以通过数据排序功能来完成。首先，你需要在组件的数据里定义一个数组，并添加一个排序字段，比如默认降序排列。

例如：

import { defineComponent, ref } from 'vue';
import { ElTable, ElTableColumn } from "element-plus";

export default defineComponent({
  data() {
    return {
      // 初始化数据
      dataSource: [
        { index: 1, name: 'Item 1' },
        { index: 2, name: 'Item 2' },
        { index: 3, name: 'Item 3' }, // 更多数据...
      ],
      // 排序字段和初始顺序
      sortField: 'index',
      sortOrder: 'descend', // 或者 'ascend' for 升序，默认为 'descend'
    };
  },
  
  setup(props) {
    const handleSort = (field: string, order: 'ascend' | 'descend') => {
      // 更新排序字段和顺序
      props.sortField = field;
      props.sortOrder = order;

      // 根据当前排序字段和顺序对数据进行倒序
      props.dataSource.sort((a, b) => {
        if (a[field] < b[field]) return order === 'descend' ? -1 : 1;
        if (a[field] > b[field]) return order === 'descend' ? 1 : -1;
        return 0;
      });
    };

    // 表头列，包含排序按钮
    const columns: Array<ElTableColumn<any>> = [
      {
        label: '序号',
        prop: 'index',
        sortable: true,
        render: (h, { row }) => `${row.index}`,
        scopedSlots: {
          customRender: 'sorter', // 添加排序处理
        },
        sorter: (a, b) => a.props.index - b.props.index, // 定义排序函数
      },
      // 其他列...
    ];

    return {
      columns,
      handleSort,
    };
  },
});

在这个例子中，当用户点击表头的“序号”列时，`handleSort`函数会被调用，会自动更新排序状态并重新排序 `dataSource` 数组。注意这里排序函数依赖于 `props.dataSource`，这是 Vue 的响应式特性使得数据变化能自动触发视图更新。