vxe-table 使用sort-by
时间: 2024-05-08 10:13:40 浏览: 8
vxe-table 是一款基于 Vue.js 的高效、灵活的表格组件。sort-by 是 vxe-table 的一个排序配置项,可以用于设置表格中的某一列是否支持排序,以及排序的规则。
使用 sort-by 首先需要在表格的 column 配置中设置 sortable: true,然后在该列的属性中设置 sort-by 属性。sort-by 属性可以是一个字符串,也可以是一个函数。如果是字符串,表示按照该字段进行排序;如果是函数,需要返回一个用于排序的值。
下面是一个简单的例子:
```html
<template>
<vxe-table :data="tableData" :columns="columns" />
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 25, score: 80 },
{ name: '李四', age: 30, score: 70 },
{ name: '王五', age: 28, score: 90 }
],
columns: [
{ title: '姓名', key: 'name', sortable: true },
{ title: '年龄', key: 'age', sortable: true },
{ title: '分数', key: 'score', sortable: true, sortBy: 'score' }
]
}
}
}
</script>
```
在上面的例子中,第三列设置了 sort-by 属性为 'score',表示按照分数进行排序。