Element UI 表单：prop 绑定动态数组嵌套对象属性

<template>
  <div class='box'>
    <TableMerge />
    <el-button @click='addForm' size='mini' type='primary' plain>
      添加表格
    </el-button>
    <el-button @click='saveForm' size='mini' type='primary' plain>
      保存表格
    </el-button>
    <br />
    <br />
    <el-form
      :model='ruleForm'
      ref='ruleForm'
      label-width='100px'
      class='formform'
      style='width: 400px; margin: 0 auto'
    >
      <div
        class='formformItemClass'
        v-for='(item, index) in ruleForm.formItemArr'
        :key='index'
      >
        <el-form-item
          label='姓名'
          :prop=''formItemArr.' + index + '.name''
          :rules='{
            required: true,
            message: '请填写',
            trigger: 'blur',
          }'
        >
          <el-input
            size='mini'
            v-model.trim='item.name'
            placeholder='请填写'
            style='width: 200px'
          ></el-input>
        </el-form-item>
        <el-form-item
          label='性别'
          :prop=''formItemArr.' + index + '.gender''
          :rules='sex'
        >
          <el-select
            clearable
            size='mini'
            v-model='item.gender'
            placeholder='请选择'
          >
            <el-option label='男' value='男'></el-option>
            <el-option label='女' value='女'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label='选择内容'
          size='mini'
          :prop=''formItemArr.' + index + '.content''
          :rules='content'
        >
          <template slot-scope='scope'>
            <el-button
              size='mini'
              type='primary'
              plain
              @click='addContent(index, scope)'
              >增加内容</el-button
            >
            <el-button
              size='mini'
              type='primary'
              plain
              @click='delContent(index, scope)'
              >删除内容</el-button
            >
            <div v-for='(item, index) in item.content' :key='index'>
              {{ item }}
            </div>
          </template>
        </el-form-item>
        <el-form-item label='嵌套表单' prop='name'>
          <el-form-item
            label='姓'
            :prop=''formItemArr.' + index + '.lastName''
            :rules='lastName'
          >
            <el-input v-model='item.lastName'></el-input>
          </el-form-item>
        </el-form-item>
        <el-form-item label='二次循环嵌套表单'>
          <div
            v-for='(groupItem, groupIndex) in item.groupData'
            :key='groupItem.id'
            draggable='true'
            class='selectItem'
          >
            <i
              class='el-icon-error'
              style='position: absolute; right: -5px; top: -5px; cursor: pointer'
              @click='delSeletedItem(groupItem.id)'
            ></i>
            <i class='el-icon-rank'></i>
            <div class='goodsItem'>
              <el-form-item
                label='第一行：'
                :prop=''formItemArr.' + index + '.groupData.' + groupIndex + '.firstLine''
                :rules='firstLine'
                style='margin-bottom: 20px'
              >
                <el-input
                  v-model='groupItem.firstLine'
                  style='width: 200px'
                  maxlength='6'
                  placeholder='最多输入6个字'
                ></el-input>
              </el-form-item>
            </div>
          </div>
        </el-form-item>
      </div>
    </el-form>
    <el-form
      :model='tabData'
      ref='ruleForm1'
      style='width: 400px; margin: 0 auto'
    >
      <el-form-item label='嵌套表单1'>
        <div
          v-for='(groupItem, groupIndex) in tabData.groupData'
          :key='groupItem.id'
          draggable='true'
          class='selectItem'
        >
          <i
            class='el-icon-error'
            style='position: absolute; right: -5px; top: -5px; cursor: pointer'
            @click='delSeletedItem(groupItem.id)'
          ></i>
          <i class='el-icon-rank'></i>
          <div class='goodsItem'>
            <el-form-item
              label='第一行：'
              :prop=''groupData.' + groupIndex + '.firstLine''
              :rules='firstLine'
              style='margin-bottom: 20px'
            >
              <el-input
                v-model='groupItem.firstLine'
                style='width: 200px'
                maxlength='6'
                placeholder='最多输入6个字'
              ></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form-item>
      <!-- 循环嵌套 -->
      <el-button @click='addGroupData'>增加表格数据</el-button>
      <el-button @click='clearCheck'>清除校验</el-button>
    </el-form>
    <el-table-all></el-table-all>
    <el-table-form-t></el-table-form-t>
  </div>
</template>
<script>
import ElTableAll from './ElTableAll';
import ElTableFormT from './ElTableFormT';
import TableMerge from './TableMerge'; //单元格合并组件
export default {
  components: {
    ElTableAll,
    ElTableFormT,
    TableMerge,
  },
  data() {
    const contentRule = (rule, value, callback) => {
      console.log('val', value);
      if (!value.length) {
        return callback(new Error('请选择图片'));
      }
      callback();
    };
    const lastNameRule = (rule, value, callback) => {
      console.log(value);
      if (!value || !value.length) {
        return callback(new Error('请输入姓名的最后一个字'));
      }
      callback();
    };
    return {
      ruleForm: {
        // 动态循环项数组
        formItemArr: [
          {
            name: '',
            gender: '',
            content: [],
            firstName: '',
            lastName: '',
            groupData: [
              {
                firstLine: '',
                id: Date.now(),
              },
            ],
          },
        ],
      },

      tabData: {
        groupData: [
          {
            firstLine: '',
            id: Date.now(),
          },
        ],
      },

      sex: {
        required: true,
        message: '请选择性别',
        trigger: 'change',
      },
      content: [{ validator: contentRule, required: true }],
      lastName: [{ validator: lastNameRule, required: true }],
      firstLine: [{ validator: lastNameRule, required: true }],
    };
  },
  methods: {
    addGroupData() {
      this.tabData.groupData.push({
        firstLine: '',
        id: Date.now(),
      });
    },
    clearCheck() {
      this.$refs['ruleForm1'].clearValidate();
    },
    addContent(index) {
      this.ruleForm.formItemArr[index].content.push(index + '---测试文本');
      this.$refs['ruleForm'].clearValidate();
    },
    delContent(index) {
      this.ruleForm.formItemArr[index].content.pop();
    },
    // 添加一个表格
    addForm() {
      let itemObj = {
        name: '',
        gender: '',
        content: [],
      };
      this.ruleForm.formItemArr.push(itemObj);
    },
    // 保存表格
    saveForm() {
      this.$refs['ruleForm'].validate((val) => {
        if (val) {
          console.log('符合要求，保存成功', this.ruleForm);
        } else {
          console.log('error submit!!');
          return false;
        }
      });
      this.$refs['ruleForm1'].validate((val) => {
        if (val) {
          console.log('符合要求，保存成功', this.ruleForm);
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
};
</script>
<style lang='less' scoped>
.box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 24px;
  .formform {
    width: 360px;
    .formformItemClass {
      padding-top: 24px;
      border: 2px dashed #ccc;
      margin-bottom: 18px;
    }
  }

  /deep/ .el-form-item__error {
    margin-left: 50px;
  }
}
</style>
<p>内容：prop 应该绑定为 <code>:prop=''formItemArr.' + index + '.groupData.' + groupIndex + '.firstLine''</code>。</p>