图片示例
代码示例
<template>
<el-form label-width="120px" @submit.native.prevent="save('itemFrom')" style="margin-right:20px" :rules="rules" ref="itemFrom" :model="item">
<div>
<div class="addRow" style="margin-left: 20px;">
<div class="searchRow">
<h5>关联数据</h5>
</div>
</div>
<div v-for="(el,index) in item.ipContent" :key = "'ipcontent'+index" class="flexd">
<div style="width:90%">
<el-form-item label="IP" :prop="`ipContent.${index}.ip`" :rules="rules.ip">
<el-input v-model="el.ip"></el-input>
</el-form-item>
<el-form-item label="端口" :prop="`ipContent.${index}.port`" :rules="rules.port">
<el-input v-model="el.port"></el-input>
</el-form-item>
<el-form-item label="数据库类型" :prop="`ipContent.${index}.dbtype`" :rules="rules.dbtype">
<el-select v-model="el.dbtype" placeholder="请选择数据库类型">
<el-option label="mongo" value="mongo"></el-option>
<el-option label="mysql" value="mysql"></el-option>
<el-option label="mssql" value="mssql"></el-option>
<el-option label="oracle" value="oracle"></el-option>
</el-select>
</el-form-item>
</div>
<div style="width:10%">
<el-button class="el-icon-minus primary" v-show="item.ipContent.length >1" size="mini" circle @click="deleteIpContent(index)" title="删除"></el-button>
</div>
</div>
<el-form-item>
<div style="width:100%;text-align: right;">
<el-button class="el-icon-plus primary" type="text" style="width:30%;text-align: right;" @click="addIpContent" title="添加" > 添加一条</el-button>
</div>
</el-form-item>
</div>
<el-form-item>
<el-button type="primary" native-type="submit">保存</el-button>
<el-button @click="resetForm('itemFrom')">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
items: [],
item: {
ipContent: [{
ip:'',
port:'',
dbtype:'',
}],
rules: {
ip: [{ required: true, message: '请输入ip', trigger: 'blur' },
{ pattern: /((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}/,message: "请输入正确的ip", trigger: 'blur' }
],
port: [,
{ required: true, message: '请输入端口', trigger: 'blur' },
{ pattern: /^([0-9]{1,4}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$/,message: "请输入正确的端口：1-65535", trigger: 'change' }
],
dbtype: [{ required: true, message: '请输入数据库类型', trigger: 'blur' }],
}
};
},
methods: {
addIpContent(){
this.item.ipContent.push({
ip:'',
port:'',
dbtype:'',
})
},
deleteIpContent(index){
console.log(index)
this.item.ipContent.splice(index,1)
console.log(this.item.ipContent)
},
},
};
</script>
注意
:prop="ipContent.${index}.ip" ipContent必须为循环的数据字段，否则不起作用
