Vuetify DataTable sorting

Question

我正在与https://vuetifyjs.com/en/components/data-tables/我设置道具

:options.sync="filter_values"
@update:options="updateFilterValues()"

我遇到的问题是，我想禁用某些列的排序，所以我将标题设置为这样，使用propsortable：false：

headers: [
{
value: "checkbox",
sortable: false,
width: '10%'
},
{
value: "userId",
sortable: true,
width: '30%'
},
{
value: "clientId",
sortable: true,
width: '30%'
},
{
value: "clientInformation",
sortable: false,
width: '30%',
},
],

我不知道为什么我的prop无法排序：false并且所有列都可以排序，我正在尝试查找文档，但与此无关。

Answer 1

理想情况下，它应该可以工作，下面是工作演示。请看一看，并通过参考下面的演示来找出您面临的问题的根本原因。

new Vue({
el: "#app",
vuetify: new Vuetify(),
data: () => ({
headers: [ { text: 'Bool', sortable: false, value: 'status' }, { text: 'String', sortable: true, value: 'val' } ],
items: [ { status: "True", val: "Alpha" }, { status: "False", val: "Beta" }, { status: "True", val: "Gamma" } ],
})
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<v-app id="app">
<v-data-table 
:headers="headers" 
:items="items"
>
</v-data-table>
</v-app>

Answer 2

检查我制作的代码笔：https://codepen.io/cmfc31/pen/zYjKOjx?editors=1010

<v-data-table
dense
:headers="headers"
:items="desserts"
:options.sync="filter_values"
item-key="name"
class="elevation-1"
></v-data-table>

如果在options道具中使用.sync修饰符，则无需侦听@update:options事件。您的变量filter_values将自动与组件同步，并根据更改进行更新。