小魚兒心語： 沒有人會關心你付出過多少努力彼绷，撐得累不累巍佑，摔的痛不痛，他們只會看你最后站在什么位置寄悯，然后羨慕嫉妒恨萤衰。
項目場景：
項目場景：一些大型的項目中，不僅僅是簡單的 form表單校驗猜旬，可能會有一些復雜的表單校驗脆栋，如下圖所示倦卖，帶新增刪除功能，同時刪除新增的表單也需要做校驗：
關鍵點：
- 新增刪除是對數組進行的操作椿争，當然要遍歷循環(huán)數組嘍
- props正常是要對應某個form中的元素怕膛，此時要對應list中的元素，該如何對應??通過
:prop="machineList.${index}.***"- rules中的校驗該如何校驗呢:只能在元素中寫上對應的校驗秦踪，否則無法實現校驗
add.png
完整代碼實現：
<el-form ref="taskRef" :model="form" :rules="rules" label-width="130px" inline>
<el-form-item label="參與人員">
<el-button type="primary" class="addbtn" @click="addbtn">添加一條</el-button>
</el-form-item>
<div v-for="(items,index) in form.taskRel" :key="index">
<el-button type="danger" icon="Delete" circle @click="deleteHeaderRow(index)"/>
<el-form-item label="參與單位" :prop="`taskRel.${index}.deptId`"
:rules="{
required: true,
message: '請選擇參與單位',
trigger: 'change',
}" label-width="100">
<el-tree-select
v-model="items.deptId"
:data="items.deptOptions"
:props="{ value: 'id', label: 'label', children: 'children' }"
value-key="id"
placeholder="請選擇參與單位"
:check-strictly="false"
@change="changedept(items,index)"
style="width: 470px;"
/>
</el-form-item>
<el-form-item label="參與人員" :prop="`taskRel.${index}.name`"
:rules="{
required: true,
message: '請選擇參與人員',
trigger: 'blur',
}">
<el-select
v-model="items.name"
filterablesize="small"
placeholder="請選擇參與人員"
multiple
@change="changeuser(items)"
style="width: 470px;">
<el-option
v-for="(item,index) in items.userList"
:key="index"
:label="item.userName"
:value="item.userId">
</el-option>
</el-select>
</el-form-item>
</div>
</el-form>
<script setup name="Task">
const data = reactive({
form: {taskRel:[]},
}
// 點擊加號:添加一行header
function addbtn() {
form.value.taskRel.push({ deptId: '', name:'',partPeopleId: '', deptOptions:[], userList:[] });
};
// 點擊減號:刪除一行header
function deleteHeaderRow (index) {
form.value.taskRel.splice(index, 1);
};
</script>
簡單的小功能褐捻，希望可以幫助到你哦~~///(^v^)\~~
