<template>
<div>
<el-form :model="Mdata">
<div v-for="xray,index in Mdata.xray_list">
<el-form-item :label="'Xray'+index+'所在主机IP:'">
<el-input v-model="xray[0]" placeholder="ip地址"/>
</el-form-item>
<el-form-item :label="'Xray'+index+'所在主机Port:'">
<el-input v-model="xray[1]" placeholder="ip端口,默认22"/>
</el-form-item>
<el-form-item label="">
<el-button type="danger" @click="rm_item2('xray',index)">删除2</el-button>
<el-button type="danger" @click="rm_item(Mdata.xray_list,index)">删除</el-button>
</el-form-item>
</div>
<el-divider>灵活的动态表单</el-divider></el-divider>
<div v-for="bbj,index in Mdata.bbj_list">
<el-form-item :label='"其他配置"+index'>
<el-input v-model="bbj[0]" placeholder=""></el-input>
</el-form-item>
<el-form-item label="">
<el-button type="danger" @click="rm_item(Mdata.bbj_list,index)">删除</el-button>
</el-form-item>
</div>
<el-form-item label="">
<!-- 有坑,这个并没有操作this.Mdata.xray_list -->
<!-- <el-button type="" @click="add_item(Mdata.xray_list,xray_new)">添加xray配置</el-button> -->
<el-button type="" @click="add_item2('xray',xray_new)">添加xray配置2</el-button>
<el-button type="" @click="add_item(Mdata.xray_list,xray_new)">添加xray配置</el-button>
<el-button type="" @click="add_item(Mdata.bbj_list,['',''])">添加bbj配置</el-button>
<el-button type="" @click="submit()">提交</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data(){
// const xray_new = ['','','','','']
return {
Mdata:{
xray_list:[
['','','','','']
],
bbj_list:[
['','']
]
},
xray_new: ['','','','','']
}
},
methods:{
add_item2(item_type, item){
var item_list = []
var new_item = Array.from(item)
switch(item_type){
case 'xray':
console.info('xray-----',new_item,item,this.Mdata.xray_list)
item_list = this.Mdata.xray_list
break
default:
alert(item_type+'瞎搞什么,gun!')
}
item_list.push(new_item)
},
rm_item2(item_type, index){
// var index = item_list.indexOf(item)
var item_list = []
switch(item_type){
case 'xray':
item_list = this.Mdata.xray_list
console.info('xray-del-----',index,this.Mdata.xray_list)
break
}
if (index != -1){
item_list.splice(index,1)
}
},
add_item(item_list, item){
var new_item = Array.from(item)
item_list.push(new_item)
},
rm_item(item_list, index){
// var index = item_list.indexOf(item) 有bug
if (item_list.length==1){
alert('至少保留一个')
return
}
if (index != -1){
item_list.splice(index,1)
}
},
submit(){
console.info(this.Mdata)
}
}
}
</script>
<style>
</style>
不墨迹,直接上源码。
效果如下图:
优势:
- 动态添加/删除一组输入框;
- 新的一组数据,可以使用封装的add_item/rm_item快速实现动态添加/删除效果