如何仅在标题单击时对 vuetify 数据表进行排序？答案

【问题标题】：How to sort vuetify datatable only on header click?如何仅在标题单击时对 vuetify 数据表进行排序？
【发布时间】：2021-06-16 00:24:39
【问题描述】：

在v-data-table 中，我有一列带有一个简单的文本字段，包含文本字段的这一列是可排序的。问题是，当我更改文本字段中的值时，数据会立即重新排序，在我的情况下，行会发生变化，在最坏的情况下，行会发生变化，焦点输入也会发生变化，就像在这个例子中一样：@987654321 @

复制：

预期行为：

有没有一种符合预期行为的方式？

非常感谢您的回答

【问题讨论】：

【解决方案1】：

看起来您应该在<v-text-field> 组件上使用不同的事件来侦听更改，而不是使用v-model 将更改自动绑定到props.items.iron。 Text Field Event Docs here

您可以执行类似使用blur 事件的操作，这样它只会在您的用户将注意力从文本字段移开时更新：

<v-text-field
  @blur="updateIron"
  :rules="[max25chars]"
  label="Edit"
  single-line
  counter
  autofocus
></v-text-field>

然后在你的 JS 文件中添加这样的方法：

  methods: {
    // ...other stuff here
    updateIron(val) {
      this.item.iron = val
    }
  }

尝试尝试不同的事件以在适当的时候更新您的值。

【讨论】：

感谢您的回答，是的，我尝试了这些事件，但这不适用于我的情况，因为我确实不需要更新排序，因为用户将插入一个值然后按 Tab转到下一个字段，因此如果同时更改排序，则 ux 很糟糕。无论如何，我找到了一种方法将其发布为答案，再次感谢您的回答

【解决方案2】：

所以我找到了答案，其中包括重新定义标题：我使用插槽 header.iron 以便仅在 click 上重新定义 sortIron 方法： basic demo

接下来我要做的是重新定义箭头、样式、“asc”和“desc”

我仍然愿意接受其他方式！

但现在我可以遵循我想要的行为：

【讨论】：