Vue2 中el-table 翻页序号连续

在 Vue3 中结合 TypeScript 使用 Element UI 的 `el-table` 表格并实现序号倒序，你可以通过数据排序功能来完成。首先，你需要在组件的数据里定义一个数组，并添加一个排序字段，比如默认降序排列。 例如： ```typescript 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 的响应式特性使得数据变化能自动触发视图更新。

在 Vue3 中，`el-table` 组件已经被废弃了，取而代之的是 `el-table` 的升级版 `el-table-v2` 或是 `el-table` 的替代品 `element-plus` 中的 `el-table` 组件。 对于 `el-table-v2`，可以在 `el-table-column` 组件的 `scopedSlots` 中拿到当前行的索引。示例如下： ```html <template> <el-table-v2 :data="tableData"> <el-table-column label="序号" align="center" width="80"> <template #default="{ $index }"> {{ $index + 1 }} </template> </el-table-column> <el-table-column label="姓名" prop="name" align="center"></el-table-column> <el-table-column label="年龄" prop="age" align="center"></el-table-column> </el-table-v2> </template> ``` 在上述代码中，通过 `$index` 可以拿到当前行的索引，然后加上 1 就可以得到当前行的序号。 对于 `element-plus` 中的 `el-table`，则可以在 `el-table-column` 组件的 `custom` 属性中传入一个函数，该函数的第一个参数就是当前行的数据对象，第二个参数就是当前行的索引。示例如下： ```html <template> <el-table :data="tableData"> <el-table-column label="序号" align="center" width="80" :custom="renderIndex"></el-table-column> <el-table-column label="姓名" prop="name" align="center"></el-table-column> <el-table-column label="年龄" prop="age" align="center"></el-table-column> </el-table> </template> <script> import { defineComponent } from 'vue' export default defineComponent({ data() { return { tableData: [ { name: '张三', age: 18 }, { name: '李四', age: 20 }, { name: '王五', age: 22 }, ], } }, methods: { renderIndex(row, index) { return index + 1 }, }, }) </script> ``` 在上述代码中，定义了一个名为 `renderIndex` 的方法，该方法的第一个参数 `row` 就是当前行的数据对象，第二个参数 `index` 就是当前行的索引。在 `el-table-column` 组件的 `custom` 属性中传入该方法即可。