Vue.js 表格输入限制：实现数量输入框不能超过初始值

本文将介绍如何在 Vue.js 中实现一个表格，其中每一行的输入框默认带出数量显示，支持手动修改，并且输入的值不能大于带出的数量。

实现步骤

定义表格数据：在 Vue 组件中，定义一个名为 `tableData` 的数据属性来存储表格数据，包括每一行的数量和其他相关信息。
使用 `v-for` 遍历表格数据：在表格中使用 `v-for` 指令遍历 `tableData` 数组，生成每一行的内容。
绑定输入框：在每一行的数量列，使用 `v-model` 指令绑定一个表单输入框，将输入框的值与对应行的数量属性绑定起来。
监听输入框变化：使用 `@input` 事件监听输入框的变化。当输入框的值发生改变时，触发该事件处理函数。
验证输入值：在事件处理函数中，判断输入框的值是否大于带出的数量，如果大于则将输入框的值重置为带出的数量。

示例代码

<template>
  <table>
    <thead>
      <tr>
        <th>名称</th>
        <th>数量</th>
        <!-- 其他表格列 -->
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in tableData" :key="index">
        <td>{{ item.name }}</td>
        <td>
          <input type="number" v-model="item.quantity" @input="handleInput(index)">
        </td>
        <!-- 其他表格列 -->
      </tr>
    </tbody>
  </table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          { name: '商品1', quantity: 10 },
          { name: '商品2', quantity: 5 },
          // 其他表格数据
        ]
      }
    },
    methods: {
      handleInput(index) {
        const item = this.tableData[index];
        if (item.quantity > item.quantity) {
          item.quantity = item.quantity;
        }
      }
    }
  }
</script>

代码说明

tableData 数组存储了表格数据，每个对象包含商品名称 name 和数量 quantity 属性。
v-for 指令遍历 tableData 数组，生成每一行的内容。
v-model 指令绑定数量列的输入框与 item.quantity 属性的值。
handleInput 方法通过判断输入框的值是否大于带出的数量来控制输入框的值是否重置。

通过以上步骤，可以轻松实现一个支持输入限制的表格，确保用户输入的数量不会超过初始值。