其實(shí)element-ui Form 表單已經(jīng)有介紹了，之前沒注意到，鏈接地址：
https://element.eleme.cn/#/zh-CN/component/form#dong-tai-zeng-jian-biao-dan-xiang

一、表格動態(tài)新增行

表格動態(tài)新增行

<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="結(jié)束時間" width="300">
                 <template slot-scope="scope">
                  <el-form-item label="" :prop="'tableData.' + scope.$index + '.endTime'" :rules="[{ required: true, message: '結(jié)束時間不可為空', 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="結(jié)束時間">
                   </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: { // 呼叫參數(shù)設(shè)置
        tableData: [{
          beginTime: '',
          endTime: ''
        }]
      },
  methods: {
    addList () {
      this.paramsSettingForm.tableData.push({
        beginTime: '',
        endTime: ''
      }),
    // 新增 有效撥打時間
    addParamsSetting () {
      this.addList()
    },
  // 刪除當(dāng)前行
    deleteRow (index) {
      this.paramsSettingForm.tableData.splice(index, 1)
    },
  }
}

二、表單動態(tài)新增行

表單動態(tài)新增行

<div style="display:flex" :key="i" v-for="(item, i) in conditionForm.introductionList">
    <el-form-item label="產(chǎn)品介紹素材" :prop="'introductionList.' + i + '.presentationId'" :rules="[{required:true,message:'不能為空',trigger:'blur'}]">
      <!-- 這里雙向綁定用循環(huán)的每一項(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="產(chǎn)品介紹場景" :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