需求：

一开始的版本仅仅是输入框输入买家信息就好了，后来产品说可能涉及多个买家，让我在不影响页面布局和复杂度的情况下让操作人录入多个买家。思前想后，好，那就改用一个下拉框，魔改。这样布局根本不用动，只不过把下拉框选择功能改为点击下拉框后出现弹框，弹框里静态为表格添加买家数据，同时添加校验输入的功能。最后确定后把买家姓名以tag形式展示在下拉框上

先上效果图：

1648653311(1).png

`实现步骤：`

1.修改下拉框

<a-select
      :value="chosenCustomer"
      mode="multiple"
      :open="false"
      style="width: 100%"
      @dropdownVisibleChange="chooseBuyer"
      @deselect="deleteCustomer"
    ></a-select>
    <buyer-modal
      ref="customer"
      :visible="showBuyerModal"
      v-show="showBuyerModal"
      @chosenBuyer="chosenBuyer"
      @closeModal="closeModal"
      :customerName="this.chosenCustomer"
      :customerMobile="this.mobile"
      :customerBirthday="this.birthday"
      :customerID="this.id"
      :title="title"
    ></buyer-modal>

:open="false" 可以取消掉默认打开的下拉块
@dropdownVisibleChange="chooseBuyer"绑定点击事件，点击后打开弹窗

2.配置可编辑表格

<template
        v-for="col in ['customerName', 'customerIdCardNumber', 'customerMobile', 'customerBirthday']"
        :slot="col"
        slot-scope="text, record, index"
      >
        <div :key="col">
          <a-form-model ref="realform" :model="record" :rules="rules">
            <a-form-model-item v-if="col == 'customerName'" prop="customerName">
              <a-input
                :value="text"
                style="margin: -5px 0"
                @change="(e) => handleChange(e.target.value, record.key, col)"
              />
            </a-form-model-item>

            <a-form-model-item v-if="col == 'customerMobile'" prop="customerMobile">
              <a-input
                style="margin: -5px 0"
                :value="text"
                @change="(e) => handleChange(e.target.value, record.key, col)"
              />
            </a-form-model-item>

            <a-form-model-item v-if="col == 'customerIdCardNumber'" prop="customerIdCardNumber">
              <a-input
                style="margin: -5px 0"
                :value="text"
                @change="(e) => handleChange(e.target.value, record.key, col)"
                @blur="getBirth(record, index)"
              />
            </a-form-model-item>
            <a-form-model-item v-if="col == 'customerBirthday'" prop="customerBirthday">
              <j-date
                placeholder="请选择出生日期"
                v-model="record.customerBirthday"
                style="width: 100%"
                @change="(e) => handleChange(e.target.value, record.key, col)"
              />
            </a-form-model-item>
          </a-form-model>
        </div>
      </template>

这里运用了a-table的template slot

v-for="col in ['customerName', 'customerIdCardNumber', 'customerMobile', 'customerBirthday']" 把需要编辑的列，放入一个循环数组里。根据循环到的列，加入想要的表单类型。

<a-form-model ref="realform" :model="record" :rules="rules">因为表格渲染的是一个数组，每一行都代表一个对象，所以要想添加校验，那这里:model要绑定每一个当前循环到的record对象。

3.添加用户的方法

handleAdd() {
      const length = this.dataSource.length
      const newData = {
        key: length,
        customerName: ``,
        customerIdCardNumber: ``,
        customerMobile: ``,
        customerBirthday: ``,
      }
      this.dataSource = [...dataSource, newData]//合并新增的对象到原数组
    },

4.修改表格内数据方法

handleChange(value, key, column) {
      const newData = [...this.dataSource]
      const target = newData.filter((item) => key === item.key)[0]//判断表格是否存在该对象
      if (target) {//target是当前要编辑的行record对象
        target[column] = value //column是对象下的某个字段
        this.dataSource = newData
      }
    },

5.最后，为该编辑表格添加校验

一开始踩坑了，用的this.$refs['realform'].validate;后来报错了，提示this.$refs['realform']validate是undefined，于是把this.$refs['realform']打印出来，发现变成了一个数组，于是想起来我的a-form-model是放在循环的template下的，所以有多少行数据就要校验几个this.$refs['realform'].validate。

handleOk() {
      var allowSubmit = true//先定义一个布尔变量
      
      this.$refs.realform.forEach((v) => {//循环this.$refs.realform
        v.validate((valid) => {
        //到这里就是和原来的校验一样了，根据循环每个对象都有一个validate
          if (valid == false) {
            allowSubmit = false //只要有一行的数组对象校验不通过就赋值false
          }
        })
      })
      if(allowSubmit == true){
          ......
        }else{
          ......
             }
      
         ### 一开始的错误做法❌
      //   this.$refs.realform.validate(valid=>{
      //       if(valid){
      //           ......
          //       }else{
      //           ......
                        }
         })
    },

以上就是个人工作以来第一篇的博客，希望在这里能够记录写代码的日子~因为还有很多不足之处，代码水平还有待提高，往后的日子我会继续努力！

【记录有趣的需求】之一.为可编辑表格添加校验

需求：

实现步骤：