如何在表格单元格中正确渲染输入表单与日期选择器？

先梳理你代码里的核心问题： #

• 列数不匹配：表头有4列，但循环生成的行只有3个<td>，缺了Id对应的列，浏览器渲染时会自动补全列结构，直接导致布局混乱。
• v-model绑定错误：循环里应该绑定当前循环项invoice_customer的属性，而不是整个数组invoice_customers，比如invoice_customers.amount要改成invoice_customer.amount，否则所有输入框会绑定同一个值，还可能引发渲染异常。
• 日期选择器溢出：b-form-datepicker默认样式可能超出单元格宽度，需要限制它的尺寸来适配单元格。

修正后的代码： #

<table v-if="invoice_customers.length > 0" style="width: 100%; table-layout: fixed;">
  <tr>
    <th>Id</th>
    <th>Amount</th>
    <th>Expire Date</th>
    <th>Note</th>
  </tr>
  <tr v-for="invoice_customer in invoice_customers" :key="invoice_customer.id">
    <!-- 补上Id列，可根据需求改为输入框或直接显示 -->
    <td>{{ invoice_customer.id }}</td>
    <td>
      <input type="number" v-model="invoice_customer.amount" style="width: 100%; box-sizing: border-box;" />
    </td>
    <td>
      <b-form-datepicker 
        v-model="invoice_customer.expire_date"
        style="width: 100%;"
        size="sm"
      ></b-form-datepicker>
    </td>
    <td>
      <input type="text" v-model="invoice_customer.note" style="width: 100%; box-sizing: border-box;" />
    </td>
  </tr>
</table>

关键修复说明： #

1. 补全列数：添加Id对应的<td>，保证表头和表体列数完全一致，这是表格布局正常的基础。
2. 修正v-model绑定：把invoice_customers.xxx改成invoice_customer.xxx，确保每一行的输入框绑定当前项的对应属性。
3. 限制表单元素宽度：给所有输入框加width: 100%和box-sizing: border-box，避免边框撑宽元素；日期选择器用size="sm"缩小尺寸，同时设置宽度100%，让它完全适配单元格。
4. 表格布局优化：给表格加table-layout: fixed，强制列宽按比例分配，避免内容随意撑开表格导致布局错乱。

内容的提问来源于stack exchange，提问作者4ri37ix L