在Vue中构建高效的单表头多表身电子化报价表单

日常报价工作中，处理单表头多表身的报价表单常常令人头疼。本文将详细讲解如何利用Vue.js框架高效构建此类电子化表单，并实现表身表格逻辑处理及自动汇总功能。

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

挑战与需求

典型的报价表单包含一个表头和多个表身，每个表身对应一个独立表格。工厂业务逻辑通常要求：每行数据自动计算建议价格，并汇总至表身单价；用户可编辑表格数据，但需防止随意修改计算逻辑。

解决方案

我们采用Vue.js结合<table>元素实现该表单。可编辑单元格(<code><td>)使用<code>contenteditable="true"属性。具体步骤如下：

1. 表格结构搭建: 使用<table>标签构建整体结构，<code><thead>用于表头，多个<code><tbody>分别对应各个表身。 代码示例：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <pre class="brush:php;toolbar:false;">&lt;table&gt; &lt;thead&gt;&lt;/thead&gt; &lt;tbody v-for=&quot;(body, index) in bodies&quot; :key=&quot;index&quot;&gt;&lt;/tbody&gt; &lt;/table&gt;</pre> <li> <p><strong>数据绑定与循环:</strong> 使用<code>v-for指令遍历表身数据，动态渲染每个表身表格。 数据应以数组形式存储，每个数组元素代表一个表身。

2. 单元格内容编辑: 对需要编辑的单元格，设置contenteditable="true"属性，并使用v-model指令绑定数据。

   <td contenteditable="true" v-model="body.row.cellData"></td>

3. 建议价格计算: 利用Vue的计算属性(computed)实现建议价格计算和汇总。

   computed: {
     calculatedPrices() {
       return this.bodies.map(body => body.rows.map(row => this.calculatePrice(row)));
     },
     totalPrices() {
       return this.bodies.map(body => this.sumPrices(body.rows));
     }
   },
   methods: {
     calculatePrice(row) {
       // 根据row数据计算建议价格
       // ...
     },
     sumPrices(rows) {
       return rows.reduce((sum, row) => sum + this.calculatePrice(row), 0);
     }
   }

4. 防止逻辑篡改: 通过Vue的响应式数据和自定义组件封装计算逻辑，确保用户只能在指定区域编辑，避免直接修改公式或计算逻辑。

通过以上步骤，即可在Vue.js中构建一个功能完善的单表头多表身电子化报价表单，兼顾用户编辑和自动计算汇总功能，同时有效防止逻辑错误。 这将显著提升报价效率，减少人工错误。