Vue + Element 实现动态表单_element 表单动态添加

1. 需求：点击发送按钮新增一个表单并校验，校验通过调用后端接口，发送按钮禁用

优化：因为需求规定一个页面只需要出现三个question和answer表单就可以，所以可以设置重置按钮优化只能发送三条question的问题

应该存在更简单的写法，但我cai，嘿嘿嘿

表单初始状态

点击发送按钮，新增一条表单

2. 踩的坑

（1）去年用表格做过相似需求，但表格会有一些特有的奇怪东西，所以选择使用form表单

（2）关于表单校验问题，在data里写表单校验的规则时，会出现无法校验的情况，所以直接绑给了标签

（3）最开始使用普通数组计数循环实现表单的动态新增，el-form-item的值绑定的是question[index]类似的值，但效果不对，会出现很多奇怪的bug，所以选择循环form.formArr，问题表单绑定值为item.question

3. 页面布局

<div class="container" v-loading="loading">
  <div class="content" v-for="(item, index) in form.formArr" :key="item.key">
    <div class="top-content" >
      <div class="question">
        <el-form :model="form" :rules="rules" ref="queryForm" label-width="70px">
          <el-form-item label="问题：" 
            :prop="'formArr.' + index + '.question'"
            :rules="{ required: true, message: '问题不能为空', trigger: 'blur' }">
            <el-input
              type="textarea"
              clearable
              size="medium"
              :rows="2"
              :autosize="{ minRows: 2}"
              placeholder="请输入问题..."
              v-model="item.question">
            </el-input>
          </el-form-item>
        </el-form>
        <div class="button">
          <el-button :disabled="item.disabled" @click="sendHandle('queryForm', index)">发送</el-button>
        </div>
      </div>
      <div class="answer">
        <div class="label">回答：</div>
        <el-input 
          v-model="item.answer" 
          type="textarea" 
          size="medium" 
          :rows="2" 
          :autosize="{ minRows: 2}"
          readonly>
        </el-input>
      </div>
    </div>
  </div>
</div>

4. data部分

data() {
    return {
      form: {
        formArr: [
          {
            question: "",
            answer: "",
            disabled: false
          }
        ]
      },
      answer: [],
      loading: false,
    }
  },

5. 函数部分

sendHandle(formName, index) {
      this.$refs[formName][index].validate((valid) => {
          if (valid) {
            this.loading = true;
            let form = {
              question: this.form.formArr[index].question
            }
            getAnswer(form)
              .then(res => {
                if(res.code == 200) {
                  for(var i = 0; i < res.result.length; i++) {
                    if(res.result[i].role == 'assistant'){
                      this.form.formArr[index].answer = res.result[i].content;
                    }
                  }
                    // 需求规定：最多三条表单（可以添加重置按钮进行需求优化）
                  if(this.form.formArr.length < 3) {
                    this.form.formArr.push({
                      question: '',
                      answer: '',
                      disabled: false
                    });
                  }
                  this.loading = false;
                  this.form.formArr[index].disabled = true;
                  this.$message({
                    type: 'success',
                    message: '发送成功'
                  })
                }
              })
              .catch(err => {
                console.log(err);
              })
 
          } else {
            return false;
          }
        });
    },

总结一下吧，希望不要再踩这个坑了