一、需求

當需要給用戶填寫表格時，并且用戶填寫行數未知，需要使用到動態表單功能，這個和通常的寫死form表單不同，如下圖所示：

?

二、實現

1、前端代碼如下圖所示：采用el-form嵌套el-table的方法，整體結構如下圖所示：

<el-form :model="instance.items" ref="data" label-width="auto"><el-table:data="instance.items.filter((data) => handleAdd)"tooltip-effect="dark"size="small"ref="table"><template><el-table-column label="人員" align="center" width="420px"><template slot-scope="scope"><el-form-item:prop="scope.$index + '.checkedPersons'":rules="{required: true,message: '至少要選擇一個人員',trigger: 'change',}"><el-checkbox-groupv-model="instance.items[scope.$index].checkedPersons"><el-checkboxv-for="name in xxxPersons":label="name":key="name">{{ name }}</el-checkbox></el-checkbox-group></el-form-item></template></el-table-column><el-table-column label="時間" align="center"><template slot-scope="scope"><el-form-item:prop="scope.$index + '.time'":rules="rules.requireTime"><el-date-pickerv-model="instance.items[scope.$index].time"placeholder="請選擇"value-format="yyyy-MM-dd"format="yyyy-MM-dd"style="width: 100%"type="date"></el-date-picker></el-form-item></template></el-table-column><el-table-column label="備注" align="center"><template slot-scope="scope"><el-form-item:prop="scope.$index + '.remark'":rules="{required: true,message: '備注不能為空',trigger: 'blur',}"><el-inputv-model="instance.items[scope.$index].remark"type="textarea":autosize="{ minRows: 5, maxRows: 10 }"maxlength="256"></el-input></el-form-item></template></el-table-column><el-table-column label="要求" align="center"><template slot-scope="scope"><el-form-item:prop="scope.$index + '.require'":rules="{required: true,message: '要求不能為空',trigger: 'blur',}"><el-inputv-model="instance.items[scope.$index].require"type="textarea":autosize="{ minRows: 5, maxRows: 10 }"maxlength="256"></el-input></el-form-item></template></el-table-column><el-table-column label="備注2" align="center"><template slot-scope="scope"><el-form-item:prop="scope.$index + '.remark2'":rules="{required: true,message: '備注2不能為空',trigger: 'blur',}"><el-inputv-model="instance.items[scope.$index].remark2"type="textarea":autosize="{ minRows: 5, maxRows: 10 }"maxlength="256"></el-input></el-form-item></template></el-table-column><el-table-column label="操作" align="center"><template slot-scope="scope"><el-button@click="handleDelete(scope.$index)"type="text"size="small">移除</el-button></template></el-table-column></template></el-table></el-form>

2、添加刪除行，以對象的形式添加和刪除即可

// 添加行handleAdd() {let row = {name: '',checkedPersons: [],time: '',remark: '',require: '',remark2: ''}this.instance.items.push(row);},handleDelete(index) {this.instance.items.splice(index, 1);},

3、添加校驗規則，當時實現這個功能，因為對elementUI還不夠熟悉，添加校驗規則花了挺長時間。規則可以直接綁定到form上，也可以寫到js腳本上。

<el-form-item:prop="scope.$index + '.checkedPersons'":rules="{required: true,message: '至少要選擇一個人員',trigger: 'change',}" >

這個當時卡了比較久，prop的數值綁定我一直參考v-model，加了個instance導致數據一直無法綁定，只需加個索引即可。

如果rules里面涉及到一些參數比較等自定義的規則，就需要把規則寫道js里面

<el-form-item:prop="scope.$index + '.time'":rules="rules.requireTime" >

?js規則代碼如下所示：

rules: {requireTime: [{ required: true, message: '請輸入要求時間', trigger: 'blur' },{validator: (rule, value, callback) => {var inputTime = value;let requireTime = this.item.requestTime;//用戶輸入的時間大于要求時間if (inputTime > requireTime) {callback(new Error('不能大于要求時間'));}callback();},trigger: "blur"}],},

以上就是實現動態表單的方法。

總結

以上是生活随笔為你收集整理的【Vue】elementUI实现动态表单功能（实现表格的增加行、删除行的功能）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。