在
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' }, // 更多数据
...
],
// 排序字段和初始顺序
sortFi
eld: 'index',
sortOrder: 'descend', // 或者 'ascend' for 升序，默认为 'descend'
};
},
setup(props) {
const handleSort = (fi
eld: string, order: 'ascend' | 'descend') => {
// 更新排序字段和顺序
props
.sortFi
eld = fi
eld;
props
.sortOrder = order;
// 根据当前排序字段和顺序对数据进行倒序
props
.dataSource
.sort((a, b) => {
if (a[fi
eld] < b[fi
eld]) return order === 'descend' ?
-1 : 1;
if (a[fi
eld] > b[fi
eld]) return order === 'descend' ? 1 :
-1;
return 0;
});
};
// 表头列，包含排序按钮
const columns: Array<
ElTableColumn<any>> = [
{
lab
el: '
序号',
prop: 'index',
sor
table: 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 的响应式特性使得数据变化能自动触发视图更新。
扫一扫
359
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
