<template> <div> <a-row> <a-col :span="24"> <div class="tb-title"> <span>项目主要参与单位及分工 <span style="color: red;margin-left: 16px;">(注:若没有填写项,请点击列表后【删除】按钮删除)</span></span> </div> </a-col> </a-row> <a-row type="flex" class="row_center"> <a-col :span="6" class="bg-gray"> <div class="special-middle"> <div class="required">单位名称</div> </div> </a-col> <a-col :span="5" class="bg-gray"> <div class="special-middle"> <div class="required">单位地址</div> </div> </a-col> <a-col :span="5" class="bg-gray"> <div class="special-middle"> <div class="required">组织机构代码/统社会信用代码</div> </div> </a-col> <a-col :span="6" class="bg-gray"> <div class="special-middle"> <div class="required">分 工</div> </div> </a-col> <a-col :span="2" class="bg-gray"> <div class="special-middle"> <div>操作</div> </div> </a-col> </a-row> <a-row v-for="(item, index) in participateUnits" :key="'participateUnits'+index" type="flex" class="row_center"> <a-col :span="6"> <div class="special-middle"> <div> <a-form-model-item :prop="'participateUnits.' + index + '.unitName'" :rules="{ required: true,message: '*',trigger: 'blur',}"> <a-input v-model="item.unitName" :maxLength="20" placeholder="单位名称" style="width: 80%" /> </a-form-model-item> </div> </div> </a-col> <a-col :span="5"> <div class="special-middle"> <div> <a-form-model-item :prop="'participateUnits.' + index + '.unitAddress'" :rules="{ required: true,message: '*',trigger: 'blur',}"> <a-input v-model="item.unitAddress" :maxLength="100" placeholder="单位地址" style="width: 80%" /> </a-form-model-item> </div> </div> </a-col> <a-col :span="5"> <div class="special-middle"> <div> <a-form-model-item :prop="'participateUnits.' + index + '.organizationCode'" :rules="{ required: true,message: '*',trigger: 'blur',}"> <a-input v-model="item.organizationCode" :maxLength="50" placeholder="组织机构代码/统社会信用代码" style="width: 80%" /> </a-form-model-item> </div> </div> </a-col> <a-col :span="6"> <div class="special-middle"> <div> <a-form-model-item :prop="'participateUnits.' + index + '.projectWork'" :rules="{ required: true,message: '*',trigger: 'blur',}"> <a-input v-model="item.projectWork" :maxLength="50" placeholder="分 工" style="width: 80%" /> </a-form-model-item> </div> </div> </a-col> <a-col :span="2"> <div class="special-middle"> <a-popconfirm title="确定要删除吗?" ok-text="确定" cancel-text="取消" @confirm="removeArray(item)"> <a-button type="link" size="small">[删除]</a-button> </a-popconfirm> </div> </a-col> </a-row> <a-row type="flex"> <a-col :span="24" style="text-align: center;"> <div class="special-middle"> <a-button type="dashed" style="width: 50%" @click="addArray"> <a-icon type="plus" /> 添加 </a-button> </div> </a-col> </a-row> </div> </template> <script> //用法 <cooperative-units :participateUnits.sync="formData.participateUnits" /> const Model = { id: null, unitName: null, unitCountry: null, unitAddress: null, organizationCode: null, projectWork: null } export default { name: 'participateUnitsEdit', data () { return { } }, props: { participateUnits: { type: Array, default: () => { return [] } }, }, components: { }, created () { }, methods: { addArray () {//添加成员 this.participateUnits.push({ ...Model }) }, removeArray (item) {//移除成员 let index = this.participateUnits.indexOf(item) if (index !== -1) { this.participateUnits.splice(index, 1) } }, }, } </script>