sortable="custom"多个排序
时间: 2023-07-02 19:09:46 浏览: 56
当需要对多个属性进行排序时,可以使用 `sortable="custom"` 并自定义排序规则。例如,假设有一个学生列表,需要按照以下顺序排序:年级、班级、姓名。可以将每个学生的信息存储为对象,然后使用自定义比较函数进行排序:
```html
<table>
<thead>
<tr>
<th>年级</th>
<th>班级</th>
<th>姓名</th>
</tr>
</thead>
<tbody>
<tr v-for="student in sortedStudents">
<td>{{ student.grade }}</td>
<td>{{ student.class }}</td>
<td>{{ student.name }}</td>
</tr>
</tbody>
</table>
```
```javascript
data() {
return {
students: [
{ name: '张三', grade: 2, class: 1 },
{ name: '李四', grade: 1, class: 2 },
{ name: '王五', grade: 2, class: 3 },
{ name: '赵六', grade: 1, class: 1 },
]
}
},
computed: {
sortedStudents() {
return this.students.sort((a, b) => {
if (a.grade !== b.grade) {
return a.grade - b.grade;
} else if (a.class !== b.class) {
return a.class - b.class;
} else {
return a.name.localeCompare(b.name);
}
});
}
}
```
这样就可以按照年级、班级、姓名的顺序进行排序了。