其实element-ui Form 表单已经有介绍了，之前没注意到，链接地址：
https://element.eleme.cn/#/zh-CN/component/form#dong-tai-zeng-jian-biao-dan-xiang

一、表格动态新增行

表格动态新增行

<template>
    <el-button type="primary" size="small"  @click="addParamsSetting">新增</el-button>

    <el-form ref="paramsSettingForm" :model="paramsSettingForm" size="small">
             <el-table
               :data="paramsSettingForm.tableData"
               style="width: 100%"
               class="list-table"
               size="mini"
               border>
               <el-table-column prop="beginTime" label="开始时间" width="300" >
                 <template slot-scope="scope">
                  <el-form-item label="" :prop="'tableData.' + scope.$index + '.beginTime'" :rules="[{ required: true, message: '开始时间不可为空', trigger: 'change' }]">
                    <el-time-picker
                      size="mini"
                      value-format="HH:mm:ss"  // 时间以时/分/秒展示
                      v-model="scope.row.beginTime"
                      :picker-options="{selectableRange: '09:00:00 - 21:00:00'}"
                      placeholder="开始时间">
                    </el-time-picker>
                  </el-form-item>
                 </template>
               </el-table-column>
               <el-table-column prop="endTime" label="结束时间" width="300">
                 <template slot-scope="scope">
                  <el-form-item label="" :prop="'tableData.' + scope.$index + '.endTime'" :rules="[{ required: true, message: '结束时间不可为空', trigger: 'change' }]">
                   <el-time-picker
                    size="mini"
                    value-format="HH:mm:ss"
                     v-model="scope.row.endTime"
                     :picker-options="{selectableRange: '09:00:00 - 21:00:00'}"
                     placeholder="结束时间">
                   </el-time-picker>
                  </el-form-item>
                 </template>
               </el-table-column>
               <el-table-column label="操作">
                 <template slot-scope="scope">
                   <el-button @click.native.prevent="deleteRow(scope.$index)" type="text" size="small">删除</el-button>
                 </template>
               </el-table-column>
             </el-table>
           </el-form>
</template>

data(){
  paramsSettingForm: { // 呼叫参数设置
        tableData: [{
          beginTime: '',
          endTime: ''
        }]
      },
  methods: {
    addList () {
      this.paramsSettingForm.tableData.push({
        beginTime: '',
        endTime: ''
      }),
    // 新增 有效拨打时间
    addParamsSetting () {
      this.addList()
    },
  // 删除当前行
    deleteRow (index) {
      this.paramsSettingForm.tableData.splice(index, 1)
    },
  }
}

二、表单动态新增行

表单动态新增行

<div style="display:flex" :key="i" v-for="(item, i) in conditionForm.introductionList">
    <el-form-item label="产品介绍素材" :prop="'introductionList.' + i + '.presentationId'" :rules="[{required:true,message:'不能为空',trigger:'blur'}]">
      <!-- 这里双向绑定用循环的每一项(item)，不然每新增行，你去选择的话会影响其它行 --> 
       <el-select clearable v-model="item.presentationId" placeholder="请选择">
           <el-option
                v-for="item in presentationIdList"
                :key="item.id"
                :label="item.presentationName"
                :value="item.id">
            </el-option>
        </el-select>
     </el-form-item>

     <el-form-item label="产品介绍场景" :prop="'introductionList.' + i + '.sceneProposalId'" :rules="[{required:true,message:'不能为空',trigger:'blur'}]">
       <el-select clearable v-model="item.sceneProposalId" placeholder="请选择">
              <el-option
                   v-for="item in proposalList"
                   :key="item.id"
                   :label="item.sceneName"
                   :value="item.id">
              </el-option>
         </el-select>
      </el-form-item>
      <i v-if="i === 0" @click="addIntroductionList" style="font-size:20px;color:#25c4fe;margin:8px 0 0 10px;" class="el-icon-circle-plus"></i>
      <i v-if="i > 0" @click="deleteIntroductionList(i)" style="font-size:20px;color:#25c4fe;margin:8px 0 0 10px;" class="el-icon-remove"></i>
</div>

data(){
  return{
      conditionForm: {
        introductionList: [{
          presentationId: '',
          sceneProposalId: ''
        }]
    }
  }
},
methods: {
  // 新增
  addIntroductionList () {
      this.conditionForm.introductionList.push({
        presentationId: '',
        sceneProposalId: ''
      })
    },
    // 删除
    deleteIntroductionList (index) {
      this.conditionForm.introductionList.splice(index, 1)
    },
}

也可以参考此资料：https://www.cnblogs.com/zdd2017/p/11065429.html