如何在v-data-table中仅对选中行的数字输入框执行校验？

要实现仅对勾选行内的数字输入框进行校验，核心思路是根据行的选中状态动态切换校验规则——选中行应用预设的数字校验规则，未选中行使用空校验（即不校验）。以下是具体实现步骤：

1. 调整模板中的输入框规则绑定 #

修改v-text-field的:rules属性，从固定的myRule改为动态判断的方法，同时移除冗余的:value（v-model已包含值绑定）：

<v-data-table
  v-model="selected"
  :headers="dataHeaders"
  :items="mealTimes"
  show-select
  @click:row="setTime"
>
  <template #[`item.data-table-select`]="{ item, isSelected }">
    <v-simple-checkbox
      :value="isSelected"
      color="primary"
      :ripple="false"
      @input="setSelected(item, isSelected)"
    />
  </template>
  <template #[`item.weight`]="{ item }">
      <div class="w-100">
        <v-text-field 
          v-model="item.weight"
          type="number"
          :rules="getRowRules(item)" <!-- 改为动态规则 -->
          outlined
          dense
        /> 
      </div>
  </template>
</v-data-table>

2. 添加动态规则判断方法 #

在组件的methods中新增getRowRules方法，根据当前行是否在selected数组中返回对应规则：

data: () => ({
  selected: [],
  myRule: [ 
    v => Number.isInteger(Number(v)) || '必须是整数',
    v => (Number(v) && Number(v) >= 1) || '最小值: 1',
    v => (Number(v) && Number(v) <= 99) || '最大值: 99',
  ],
}),
methods: {
  getRowRules(item) {
    // 选中行应用校验规则，未选中行返回空校验（始终通过）
    return this.selected.includes(item) ? this.myRule : [() => true]
  },
  setSelected(item, isSelected) {
    // 保持你原本的选中状态处理逻辑，确保与v-model同步
    if (isSelected) {
      const exists = this.selected.some(i => i === item)
      if (!exists) this.selected.push(item)
    } else {
      const index = this.selected.findIndex(i => i === item)
      if (index !== -1) this.selected.splice(index, 1)
    }
  },
  setTime() {
    // 你的行点击逻辑
  }
}

原理说明 #

• 当行被勾选时，selected数组会包含当前行的item对象，此时getRowRules返回预设的myRule，输入框会执行数字校验。
• 当行未被勾选时，返回[() => true]，这个规则始终返回true，相当于跳过校验，输入框不会显示错误提示。
• Vuetify的v-text-field会在规则变化时自动重新校验，所以勾选/取消勾选行时，输入框会实时切换校验状态。

内容的提问来源于stack exchange，提问作者Rio