使用 Vuetify v-data-table + v-model 选择行没有按预期工作，并自动对我选择的行进行排序，这让我很困惑

Posted 2023-02-22

【中文标题】使用 Vuetify v-data-table + v-model 选择行没有按预期工作，并自动对我选择的行进行排序，这让我很困惑

【英文标题】：Selecting rows with Vuetify v-data-table + v-model is not working as expected and auto-sorts my selected rows messing me up

【发布时间】：2021-07-15 20:08:46

【问题描述】：

我正在使用 Vuetify v-data-table 组件，我正在尝试选择表上的行并将它们转换为 csv。所以我想选择所有行，将我选择的行放在一个对象数组中，然后单击一个按钮来执行一个执行转换的函数，但是当我遇到 v-data-table 组件的问题时选择行，而不是根据它们被选中的顺序（单击复选框）将它们推入我的数组中，它们不会按预期推入我的 v-model 数组中，就好像每次我单击一行时， v-model 或 v-data-table 组件按我的 item-key 升序对生成的“选定”数组进行排序，即使我没有该设置，例如，这是我的代码：

<template>
<v-card>
  <v-data-table
    v-model='selected'
    :headers='headers'
    :items='results'
    item-key='id'
    show-select
    dense
  ></v-data-table>
</v-card>
</template>

<script>
export default 
    data: () => (
        headers: [
     value: 'id', text: 'ID', fixed: true, active: false ,
     value: 'd_submission_date', text: 'Date of Submission', active: true ,
     value: 'i_sample_count', text: 'Number of Samples', active: true ,
     value: 'i_file_count', text: 'Number of Files', active: true ,
     value: 'created_at', text:'Created At', active: false ,
     value: 'updated_at', text: 'Updated At', active: false 
]
        results: [
    "id": 1203,
    "d_submission_date": "2021-04-08",
    "created_at": "2021-04-08T18:19:31.011561Z",
    "updated_at": "2021-04-14T21:42:35.285029Z",
    "i_sample_count": 1,
    "i_file_count": 0
,

    "id": 1202,
    "d_submission_date": "2021-04-08",
    "created_at": "2021-04-08T18:19:31.011561Z",
    "updated_at": "2021-04-14T21:42:35.285029Z",
    "i_sample_count": 1,
    "i_file_count": 0
,

    "id": 1201,
    "d_submission_date": "2021-04-08",
    "created_at": "2021-04-08T18:19:31.011561Z",
    "updated_at": "2021-04-14T21:42:35.285029Z",
    "i_sample_count": 1,
    "i_file_count": 0
],
        selected: []
    )
</script>

因此，如果我通过单击旁边的复选框来选择 id 为 1203 的行，则该对象将通过与 v-model 的双向绑定被推送到我选择的数组中，因此“selected = [ “身份证”：1203， "d_submission_date": "2021-04-08", "created_at": "2021-04-08T18:19:31.011561Z", "updated_at": "2021-04-14T21:42:35.285029Z", “i_sample_count”：1， “i_file_count”：0 ]"

但是让我们说在这样做之后我选择了 id 为 1201 的行，然后选择了 id 为 1202 的行，我希望我选择的数组是“selected = [ id:1203, etc. , id: 1201 等 , id: 1202 等 ]" 但我得到了这个数组："selected = [ id:1201, etc. , id:1202, etc. , id: 1203等]"

因此，由于某种原因，数据会按我的 item-key 升序自动排序，我不知道为什么或如何阻止它！我已经尝试了很多 v-data-table 道具，如 sort-by-desc 和 sort-by='id' 无济于事，有没有其他人经历过这个或知道该怎么做，感谢任何帮助！

提前致谢

【问题讨论】：

您需要它们的特定顺序吗？或者只是他们被按下的顺序？因为如果您按特定顺序需要它们，您可以在将它们转换为 svc 之前对数组执行排序方法

@NoyGafni 我需要它们按照它们出现在数据表上的顺序，所以就像我按 id 降序排列它们一样，当我“全选”时，我的数组中的数据应该按降序也是如此，而不是按从索引 0 到末尾的升序排序，这就是正在发生的事情

好吧，根据 vuetify 源代码，选择值被保存为一个对象，其中 item-key 为 key，item 为 value，然后它们发出Object.values(selection)。这就解释了为什么选择值是按 item-key 排序的，因为 javascript 根据其键对对象进行排序。因此，总而言之，您只能通过根据当前的 sortBy 和 sortDesc 对数组进行排序来实现您的目标。使用 vuetify 无法实现这一点 - 但您可以根据需要打开功能请求问题

嗨@NoyGafni，非常感谢你深入研究源代码来帮助我，我想知道你是否可以查看我的另一篇文章而不是这篇文章，我想我没有描述我的问题很好，我在这里更好地解释了我的问题，如果这改变了你的答案/我的解决方案，请告诉我***.com/questions/67202306/…

我很抱歉，但我不知道为什么有时会发生，有时不会。我建议在执行操作之前使用您想要的值对数组进行排序，然后就像我在之前的评论中所说的那样。

【参考方案1】：

v-data-table 根据 item-key 对 v-model 数组进行不同的处理，我有一些表，其中我的 item-key 是一个字符串，其中包含字母字符和键字符串中的数字，然后是 item-keys只是数字（但仍然是字符串），并且组件在 v-model 中对它们的处理方式不同，绝对疯狂