在Vue项目中对数组进行动态添加或者删除对象和对象数组 - 好文

添加核心代码如下：
this.data.push({ type: [{ value: '选项1', label: 'in' }, { value: '选项3', label:
'out' }], value:[{ value: '选项1', label: 'CSV' }, { value: '选项3', label: 'TSV'
}], parameter:'', default:'', description:'', isDelete:false, });

删除核心代码如下：
/*遍历数组，然后根据选中的状态获取对应的下标，然后进行删除*/ for (let i = 0;i<this.data.length;i++){ let
obj = this.data[i]; if (obj.isDelete){ this.data.splice(i,1); i-- } }

全部代码如下：
<template> <div>
============================32、在Vue项目中实现动态添加或者删除对象和对象数组============================
<div> <el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
<el-button type="primary" icon="el-icon-delete"
@click="deleteItem"></el-button> <el-row :gutter="50" v-for="(item,index) in
data" :key="index">  <el-col :span="4"> <div class="grid-content
bg-purple"> <el-row > <el-col :span="24"> <el-select v-model="value"
placeholder="请选择" size="mini"> <el-option v-for="obj in item.type"
:key="obj.value" :label="obj.label" :value="obj.value"> </el-option>
</el-select> </el-col> </el-row > </div> </el-col>  <el-col
:span="4"> <div class="grid-content bg-purple-light"> <el-row > <el-col
:span="24"> <el-select v-model="value" placeholder="请选择" size="mini">
<el-option v-for="obj in item.value" :key="obj.value" :label="obj.label"
:value="obj.value"> </el-option> </el-select> </el-col> </el-row > </div>
</el-col>  <el-col :span="4"> <div class="grid-content
bg-purple"> <el-input size="mini" placeholder="请输入内容" v-model="item.parameter"
clearable> </el-input> </div> </el-col>  <el-col :span="4"> <div
class="grid-content bg-purple-light"> <el-input size="mini" placeholder="请输入内容"
v-model="item.default" clearable> </el-input> </div> </el-col>
 <el-col :span="4"> <div class="grid-content bg-purple">
<el-input size="mini" placeholder="请输入内容" v-model="item.description" clearable>
</el-input> </div> </el-col>  <el-col :span="4"> <div
class="grid-content bg-purple-light " id="checkboxSpacingDiv">  <el-checkbox v-model="item.isDelete"
size="medium"></el-checkbox> </div> </el-col> </el-row> </div> </div>
</template> <script> export default { name: "VueArrays_32", data(){ return {
data:[ { type: [{ value: '选项1', label: 'in' }, { value: '选项3', label: 'out' }],
value:[{ value: '选项1', label: 'CSV' }, { value: '选项3', label: 'TSV' }],
parameter:'', default:'', description:'', isDelete:false, }, ], } }, methods:{
add(){ this.data.push({ type: [{ value: '选项1', label: 'in' }, { value: '选项3',
label: 'out' }], value:[{ value: '选项1', label: 'CSV' }, { value: '选项3', label:
'TSV' }], parameter:'', default:'', description:'', isDelete:false, }); },
deleteItem(){ /*遍历数组，然后根据选中的状态获取对应的下标，然后进行删除*/ for (let i =
0;i<this.data.length;i++){ let obj = this.data[i]; if (obj.isDelete){
this.data.splice(i,1); i-- } } } } } </script> <style scoped> </style>
效果图如下：

热门工具换一换