Question

Vuetify.js数据表组件具有内置的排序功能，但是它是根据模型中的数据而不是显示给客户端的文本进行排序的。

在下面的示例中，“ age”的原始值（例如“ EIGHTEEN_TO_TWENTY”）被转换为可读性更高的格式（例如“ 18-20”）。但是由于Vuetify按模型排序，所以它对EIGHTEEN

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>

Answer 1

您可以根据需要使用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绑定到计算的属性“ formatMembers”，而不是数据中的原始“ members”。我添加了一个新的'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链接

按显示的文本对Vuetify表进行排序（非模型）

1 个答案: