添加核心代码如下:
this.data.push ({
类型:[{
价值:“选项1 ',
标签:“在”
},
{
价值:“选项3 ',
标签:“出去”
}),
价值:[{
价值:“选项1 ',
标签:“CSV”
},
{
价值:“选项3 ',
标签:“TSV”
}),
参数:”,
默认值:”,
描述:”,
isDelete:假的,
});
删除核心代码如下:
/*遍历数组,然后根据选中的状态获取对应的下标,然后进行删除*/(让我=0;i
全部代码如下:
& lt; template>
& lt; div>============================32,在Vue项目中实现动态添加或者删除对象和对象数组============================& lt; div>
& lt; el-button类型=俺跫丁蓖急?癳l-icon-plus @click”=疤砑印弊４? lt;/el-button>
& lt; el-button类型=俺跫丁蓖急?癳l-icon-delete @click”=癲eleteItem”祝辞& lt;/el-button>
& lt; el-row:地沟=" 50 " v=笆荨毕?指数:关键=爸甘北?
& lt; !——类型——比;
& lt; el-col:跨度=" 4 "比;
& lt; div class=" grid-content bg-purple”比;
& lt; el-row比;
& lt; el-col:跨度=?4”比;
& lt; el-select v模型=凹壑怠闭嘉环?扒胙≡瘛按笮=懊阅恪北?
& lt; el-option
v代表=癷tem.type obj”
:关键=" obj.value "
:label=" obj.label "
:value=" https://www.yisu.com/zixun/obj.value "比;
& lt;/el-option>
& lt;/el-select>
& lt;/el-col>
& lt;/el-row比;
& lt;/div>
& lt;/el-col>
& lt; !——价值比;
& lt; el-col:跨度=" 4 "比;
& lt; div class=" grid-content bg-purple-light”比;
& lt; el-row比;
& lt; el-col:跨度=?4”比;
& lt; el-select v模型=凹壑怠闭嘉环?扒胙≡瘛按笮=懊阅恪北?
& lt; el-option
v代表=癷tem.value obj”
:关键=" obj.value "
:label=" obj.label "
:value=" https://www.yisu.com/zixun/obj.value "比;
& lt;/el-option>
& lt;/el-select>
& lt;/el-col>
& lt;/el-row比;
& lt;/div>
& lt;/el-col>
& lt; !——参数比;
& lt; el-col:跨度=" 4 "比;
& lt; div class=" grid-content bg-purple”比;
& lt; el-input
大?"迷你"
占位符="请输入内容”
v模型=" item.parameter "
clearable>
& lt;/el-input>
& lt;/div>
& lt;/el-col>
& lt; !——违约——比;
& lt; el-col:跨度=" 4 "比;
& lt; div class=" grid-content bg-purple-light”比;
& lt; el-input
大?"迷你"
占位符="请输入内容”
v模型=" item.default "
clearable>
& lt;/el-input>
& lt;/div>
& lt;/el-col>
& lt; !——描述比;
& lt; el-col:跨度=" 4 "比;
& lt; div class=" grid-content bg-purple”比;
& lt; el-input
大?"迷你"
占位符="请输入内容”
v模型=" item.description "
clearable>
& lt;/el-input>
& lt;/div>
& lt;/el-col>
& lt; !——德尔比;
& lt; el-col:跨度=" 4 "比;
& lt; div class=" grid-content bg-purple-light " id=癱heckboxSpacingDiv”比;
& lt; !——“检查”为真或假的在
& lt; el-checkbox v模型="项目。isDelete媒介“大?祝辞& lt;/el-checkbox>
& lt;/div>
& lt;/el-col>
& lt;/el-row>
& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
名称:“VueArrays_32”,
数据(){
返回{
数据:[
{
类型:[{
价值:“选项1 ',
标签:“在”
},
{
价值:“选项3 ',
标签:“出去”
}),
价值:[{
价值:“选项1 ',
标签:“CSV”
},
{
价值:“选项3 ',
标签:“TSV”
}),
参数:”,
默认值:”,
描述:”,
isDelete:假的,
},
]，
}
},
方法:{
add () {
this.data.push ({
类型:[{
价值:“选项1 ',
标签:“在”
},
{
价值:“选项3 ',
标签:“出去”
}),
价值:[{
价值:“选项1 ',
标签:“CSV”
},
{
价值:“选项3 ',
标签:“TSV”
}),
参数:”,
默认值:”,
描述:”,
isDelete:假的,
})；
},
deleteItem () {/*遍历数组,然后根据选中的状态获取对应的下标,然后进行删除*/(让我=0;i
