可以参考elementUI的动态表单文档https://element.eleme.cn/#/zh-CN/component/form
效果大概是这样
具体代码:
<el-dialog title="批量新增" :visible.sync="batchAddDialogVisible" width="700px">
<el-form :inline="true" :model="batchAddData" ref="batchAddForm" class="form-inline edit_info "
label-width="110px">
<div class="moreRulesIn" v-for="(item, index) in batchAddData.batchList" :key="item.key">
<el-form-item class="rules" label="渠道商名称:" :prop="'batchList.' + index +'.name'" :rules="rules.name">
<el-input v-model="item.name" placeholder="请输入内容" class="el-select_box"></el-input>
</el-form-item>
<el-form-item class="rules" label="联系人:" :prop="'batchList.' + index +'.conacter_name'" :rules="rules.conacter_name">
<el-input v-model="item.conacter_name" placeholder="请输入内容" class="el-select_box"></el-input>
</el-form-item>
<el-form-item class="rules" label="手机号:" :prop="'batchList.' + index +'.phone'" :rules="rules.phone">
<el-input v-model="item.phone" placeholder="请输入内容" class="el-select_box"></el-input>
</el-form-item>
<el-form-item class="rules" label="合作内容:" :prop="'batchList.' + index +'.partner_content'" :rules="rules.partner_content">
<el-checkbox-group v-model="item.partner_content">
<el-checkbox
v-for="item in partnerContentList"
:key="item.id"
:label="item.id"
>
{{item.name}}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item class="rules" label="合作期限:">
<el-date-picker
v-model="item.partner_start_time"
type="date"
:prop="'batchList.' + index +'.partner_start_time'"
:rules="rules.partner_start_time"
placeholder="选择日期">
</el-date-picker>
-
<el-date-picker
v-model="item.partner_end_time"
type="date"
:prop="'batchList.' + index +'partner_end_time'"
:rules="rules.partner_end_time"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item class="rules" label="负责人:" :prop="'batchList.' + index +'.owner'" :rules="rules.owner">
<el-select v-model="item.owner" placeholder="请选择">
<el-option
v-for="sitem in status"
:key="sitem.value"
:label="sitem.label"
:value="sitem.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item class="rules" label="状态:" :prop="'batchList.' + index +'.status'" :rules="rules.status">
<el-select v-model="editLineData.status" placeholder="请选择">
<el-option
v-for="sitem in status"
:key="sitem.value"
:label="sitem.label"
:value="sitem.value">
</el-option>
</el-select>
</el-form-item>
<el-button @click="deleteLine(item, index)" style="float: right">删除</el-button>
<el-divider style="margin-top: 30px;"></el-divider>
</div>
</el-form>
<div slot="footer" class="dialog-footer">
<el-row justify="space-between">
<el-col :span="8">
<el-button type="primary" @click="submitBatchForm('batchAddForm')" >确定
</el-button>
</el-col>
<el-col :span="8">
<el-button type="primary" @click="addLine" >新增行
</el-button>
</el-col>
</el-row>
</div>
</el-dialog>
表单验证,这里的验证跟普通的写法一样
rules: {
name: [
{required: true, message: '请输入渠道商名称', trigger: 'blur'}
],
conacter_name: [
{required: true, message: '请输入联系人', trigger: 'blur'}
],
phone: [
{ required: true, trigger: 'blur', validator: validPhone }
],
partner_content:[
{ required: true, message: '请选择合作内容', trigger: 'blur' }
],
partner_start_time:[
{ required: true, message: '请选择合作开始时间', trigger: 'blur' }
],
partner_end_time:[
{ required: true, message: '请选择合作结束时间', trigger: 'blur' }
],
owner:[
{ required: true, message: '请选择负责人', trigger: 'blur' }
],
status:[
{ required: true, message: '请选择状态' ,trigger: 'blur' }
]
},
新增行
//批量新增--增加行
addLine(){
this.batchAddData.batchList.push({
name: '',
conacter_name:'',
phone: '',
partner_content: [],
partner_start_time:'',
partner_end_time:'',
owner:'',
status: ''
})
},
关键是这里的prop和rule填写规则:
<el-form-item class="rules" label="联系人:" :prop="'batchList.' + index +'.conacter_name'" :rules="rules.conacter_name">
<el-input v-model="item.conacter_name" placeholder="请输入内容" class="el-select_box"></el-input>
</el-form-item>
<el-form-item class="rules" label="手机号:" :prop="'batchList.' + index +'.phone'" :rules="rules.phone">
<el-input v-model="item.phone" placeholder="请输入内容" class="el-select_box"></el-input>
</el-form-item>
正常表单验证是prop,但是这里动态的要用 :prop
规则是 :prop="'batchList.' + index +'.phone'" ; batchList是你要循环的数组,index是数组索引,phone是数组元素里面的字段,用.连起来。
:rules这里每个表单项都要添加,多个项用:rules="rules.phone"这样加以区分。
不知道为什么从hbuilder里面复制出来代码格式就乱了,大家将就看吧...