Vuetify.js 数据表组件具有内置排序功能，但它根据模型中的数据而不是显示给客户端的文本进行排序。
在下面的示例中，“年龄”的原始值(例如“EIGHTEEN_TO_TWENTY”)被转换为更易读的格式(例如“18-20”)。但由于 Vuetify 按模型排序，它按 EIGHTEEN < FIFTEEN < TWENTYONE 排序，而不是 15 < 18 < 21。有没有办法按计算/显示的值排序？
Vue.use(Vuetify);
vue = new Vue({
el: '#main',
data: {
members: [{name: 'Bob', age: 'FIFTEEN_TO_SEVENTEEN', id: 1},
{name: 'Sue', age: 'EIGHTEEN_TO_TWENTY', id: 2},
{name: 'Bill', age: 'TWENTYONE_TO_TWENTYFOUR', id: 3}],
ageLabels: {FIFTEEN_TO_SEVENTEEN : '15-17',
EIGHTEEN_TO_TWENTY : '18-20',
TWENTYONE_TO_TWENTYFOUR : '21-24'},
tableFields: [{value: 'name', text: 'Name'},
{value: 'age', text: 'Age'},
{value: 'id', text: 'ID'}]
}
});<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
</head>
<body>
<div id=main>
<v-data-table :headers="tableFields" :items="members" data-app>
<template v-slot:items="props">
<td>{{ props.item.name }}</td>
<td>{{ ageLabels[props.item.age] }}</td>
<td>{{ props.item.id }}</td>
</template>
</v-data-table>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.8/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
</body>最佳答案
您可以使用 Vue 的计算属性功能根据您的需要更改默认数据模型。
为此，模板的更改为:
<div id="main">
<v-data-table :headers="tableFields" :items="formatMembers" disable-initial-sort data-app>
<template v-slot:items="props">
<td>{{ props.item.name }}</td>
<td>{{ props.item.age }}</td>
<td>{{ props.item.id }}</td>
</template>
</v-data-table>
</div>
在这里，我将 :items 绑定(bind)到计算属性“formatMembers”，而不是数据中的原始“成员”。我添加了一个新的“disable-initial-sort”属性来禁用 vuetify 的默认初始排序，该排序按第一列对表进行排序(在您的情况下，它是名称列)。
然后在脚本中使用计算属性，如下所示:
<script>
Vue.use(Vuetify);
let vue = new Vue({
el: "#main",
data: {
members: [{
name: "Bob",
age: "FIFTEEN_TO_SEVENTEEN",
id: 1
}, {
name: "Sue",
age: "EIGHTEEN_TO_TWENTY",
id: 2
}, {
name: "Bill",
age: "TWENTYONE_TO_TWENTYFOUR",
id: 3
}],
ageLabels: {
FIFTEEN_TO_SEVENTEEN: "15-17",
EIGHTEEN_TO_TWENTY: "18-20",
TWENTYONE_TO_TWENTYFOUR: "21-24"
},
tableFields: [{
value: "name",
text: "Name"
}, {
value: "age",
text: "Age"
}, {
value: "id",
text: "ID"
}]
},
computed: {
formatMembers() {
let newMembers = this.members.slice();
newMembers.map((el, id) => (el.age = this.ageLabels[el.age]));
return newMembers;
}
}
});
</script>
这是工作 codesandbox链接
关于vue.js - 按显示文本(而非模型)对 Vuetify 表进行排序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55231188/