Question

我正在内联编辑数据表。正在编辑的值应低于另一列中的值。如何防止输入无效值？

    <template slot="items" slot-scope="props">
      <td class="text-xs-left">{{ props.item.code }}</td>
      <td class="text-xs-left">{{ props.item.itemName }}</td>
      <td class="text-xs-right">{{ props.item.price }}</td>
      <td class="text-xs-right">{{ props.item.amount }}</td>
      <td class="text-xs-right red lighten-3">
        <v-edit-dialog
          :return-value.sync="props.item.returnAmount"
          large
          lazy
          @save="saveLine(props.item)"
          persistent
          saveText="Guardar"
          cancelText="Cancelar"
        >
          <div class="text-xs-right">{{ props.item.returnAmount }}</div>
          <template v-slot:input>
            <div class="mt-3 title">Actualizar Ctd a Devolver</div>
          </template>
          <template v-slot:input>
            <v-text-field
              v-model="props.item.returnAmount"
              :rules="returnAmountRules"
              type="number"
              label="cantidad a devolver"
              autofocus
            ></v-text-field>
          </template>
        </v-edit-dialog>
      </td>
    </template>

我创建了一个验证规则 returnAmountRules ，如果输入负数，则表示错误。我还创建了一种方法 saveLine 来验证退货金额不大于金额列。

returnAmountRules显示错误，但允许输入负数在saveLine方法中，我可以比较这些值...但是然后呢？

理想情况下，我应该能够阻止用户输入负的退货金额或超过原始金额的退货金额。

谢谢

*编辑*

我没有找到防止输入无效值的方法，但最终我需要防止提交无效值。因此，我通过添加用于表单的验证逻辑来解决了这个问题：

我通过添加 tr 标记并使用 @click 将值存储在数据属性（currentRow）中，向数据表的每一行添加了验证。
我在返回金额字段中添加了一条验证规则（使用currentRow从其他列中获取值）

最后，我在数据表之前用括起来，然后提交称为表单验证的值

<v-form ref="devolucionesForm">
<v-data-table
  :headers="headers"
  :items="devolucionForEditDetails"
  :loading="loading"
  class="elevation-1"
  :no-data-text="noData"
>
  <template slot="items" slot-scope="props">
    <tr @click="selectRow(props.item)">
      <td class="text-xs-left">{{ props.item.code }}</td>
      <td class="text-xs-left">{{ props.item.itemName }}</td>
      <td class="text-xs-right">{{ props.item.price }}</td>
      <td class="text-xs-right">{{ props.item.amount }}</td>
      <td class="text-xs-right">
        <v-text-field
          v-model="props.item.returnAmount"
          type="number"
          :rules="[returnAmountRules]"
        ></v-text-field>
      </td>
    </tr>
  </template>
</v-data-table>

 data() {
   return {
    ...
    currentRow: {}
   }
 },
 methods: {
    returnAmountRules(v) {
      if (v === undefined) {
        return true
      }

      let returnAmount = parseInt(v, 10)
      let purchaseAmount = parseInt(this.currentRow.amount, 10)

      if (returnAmount < 0) {
        return 'La cantidad no puede ser negativa'
      }

      if (returnAmount > purchaseAmount) {
        return 'La cantidad a devolver no puede ser mayor a la cantidad de compra'
      }

      return true
    },

    selectRow(row) {
      this.currentRow = row
    },

    closeDialog() {
      this.$store.commit('toggleOrdersDialog', {
        editMode: false,
        order: {}
      })
    },
    totalAsCurrency(total) {
      return formatter.format(total)
    },

    solicita() {
      console.log('validate', this.$refs.devolucionesForm.validate())
      let errors = []
      this.devolucionForEditDetails.forEach((elem, i) => {
        if (elem.returnAmount > elem.amount) {
          errors.push(
            `La cantidad a devolver por ${
              elem.returnAmount
            } en la partida ${i} es mayor a la cantidad comprada`
          )
        }
        console.log('Errors', errors)
      })

      this.closeDialog()
    }
  },

在Vuetify中内联编辑数据表时如何防止无效值

0 个答案: