vue表单嵌套子组件（子表单）的一种处理方式、2层数组嵌套时props写法、computed闭包写法可以支持传递参数

如图，页面是一个大的表单，现在需求是页面上加上这样一个区域，其中也有表单，但是不希望在原来的页面中添加代码，可以将新的内容封装成一个组件（pscdsTable），组件内的代码可以平移到页面中，只是写在里面可以使结构清晰些

组件内注意2个写法：

1. 嵌套较深的表单props写法
2. computed闭包形式写法

pscdsTable.vue

<template>
  <div>
    <div
      v-for="(item, index) of form.purchaseProductEditDTOList"
      :key="item.id"
      class="mb10"
    >
      <template v-if="isShow(item)">
        <table class="custom-table no-space">
          <thead>
            <th min-width="600">Item</th>
            <th min-width="100">订单数量</th>
            <th min-width="200">印刷方式</th>
            <th min-width="100">售价</th>
          </thead>
          <tbody>
            <tr>
              <td>
                <el-tooltip :content="item.address">
                  <div class="ell" style="width: 100%">
                    {{ item.address }}
                  </div>
                </el-tooltip>
              </td>
              <td>{{ item.numDemand + item.numPurchase }}</td>
              <td>{{ item.printingWay || '--' }}</td>
              <td>{{ item.priceExcludingTax || '--' }}</td>
            </tr>
          </tbody>
        </table>
        <table class="custom-table no-space">
          <thead>
            <th min-width="500">收货地址</th>
            <th min-width="200">收货公司</th>
            <th min-width="100">收货人</th>
            <th min-width="100">联系电话</th>
            <th min-width="100">
              <span>
                <i>*</i>
                分配数量
              </span>
            </th>
          </thead>
          <tbody>
            <tr v-for="(pscd, k) of item.pscds" :key="k">
              <td>
                <el-tooltip :content="pscd.address">
                  <div class="ell" style="width: 100%">{{ pscd.address }}</div>
                </el-tooltip>
              </td>
              <td>{{ pscd.companyName || '--' }}</td>
              <td>{{ pscd.consigneeName || '--' }}</td>
              <td>{{ pscd.consigneePhone || '--' }}</td>
              <td width="200">
                <el-form-item
                  :prop="
                    'purchaseProductEditDTOList.' +
                    index +
                    '.pscds.' +
                    k +
                    '.quantTotle'
                  "
                  :rules="rules.quantTotle"
                >
                  <el-input
                    maxlength="10"
                    v-model="pscd.quantTotle"
                    placeholder="请输入"
                    clearable
                  />
                </el-form-item>
              </td>
            </tr>
          </tbody>
        </table>
      </template>
    </div>
  </div>
</template>

<script>
  export default {
    props: { form: { type: Object, default: () => ({}) } },
    data() {
      return {
        rules: {
          quantTotle: [
            {
              required: true,
              pattern: /^[0-9]+?$/,
              message: '请输入>=0的整数',
              trigger: ['blur', 'change'],
            },
          ],
        },
      }
    },
    computed: {
      // 当 数量 = 本次采购数量 + 溢装数 时，才显示产品以及地址信息，否则隐藏；并且在隐藏时，将分配数量恢复为初始值
      isShow() {
        return function (item) {
          const { numDemand, numPurchase, numRelax } = item
          const flag =
            Number(numDemand) !== Number(numPurchase) + Number(numRelax)
          if (!flag) {
            for (const pscd of item.pscds) {
              pscd.quantTotle = pscd.initQuantTotle
            }
          }
          return flag
        }
      },
    },
  }
</script>

如果你觉得这篇文章对你有用，可以看看作者封装的库xtt-utils，里面封装了非常实用的js方法。如果你也是vue开发者，那更好了，除了常用的api，还有大量的基于element-ui组件库二次封装的使用方法和自定义指令等，帮你提升开发效率。不定期更新，欢迎交流~