Add the core code as follows :
this.data.push({ type: [{ value: ' option 1', label: 'in' }, { value: ' option 3', label:
'out' }], value:[{ value: ' option 1', label: 'CSV' }, { value: ' option 3', label: 'TSV'
}], parameter:'', default:'', description:'', isDelete:false, });
 

Remove the core code as follows :
/* Traversal array , Then get the corresponding subscript according to the selected state , Then delete it */ for (let i = 0;i<this.data.length;i++){ let
obj = this.data[i]; if (obj.isDelete){ this.data.splice(i,1); i-- } }
 

The full code is as follows :
<template> <div>
============================32, stay Vue Add or delete objects and object arrays dynamically in the project ============================
<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"> <!--Type--> <el-col :span="4"> <div class="grid-content
bg-purple"> <el-row > <el-col :span="24"> <el-select v-model="value"
placeholder=" Please select " 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> <!--value--> <el-col
:span="4"> <div class="grid-content bg-purple-light"> <el-row > <el-col
:span="24"> <el-select v-model="value" placeholder=" Please select " 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> <!--Parameter--> <el-col :span="4"> <div class="grid-content
bg-purple"> <el-input size="mini" placeholder=" Please enter the content " v-model="item.parameter"
clearable> </el-input> </div> </el-col> <!--Default--> <el-col :span="4"> <div
class="grid-content bg-purple-light"> <el-input size="mini" placeholder=" Please enter the content "
v-model="item.default" clearable> </el-input> </div> </el-col>
<!--Description--> <el-col :span="4"> <div class="grid-content bg-purple">
<el-input size="mini" placeholder=" Please enter the content " v-model="item.description" clearable>
</el-input> </div> </el-col> <!--Del--> <el-col :span="4"> <div
class="grid-content bg-purple-light " id="checkboxSpacingDiv"> <!-- `checked` by
true or false --> <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: ' option 1', label: 'in' }, { value: ' option 3', label: 'out' }],
value:[{ value: ' option 1', label: 'CSV' }, { value: ' option 3', label: 'TSV' }],
parameter:'', default:'', description:'', isDelete:false, }, ], } }, methods:{
add(){ this.data.push({ type: [{ value: ' option 1', label: 'in' }, { value: ' option 3',
label: 'out' }], value:[{ value: ' option 1', label: 'CSV' }, { value: ' option 3', label:
'TSV' }], parameter:'', default:'', description:'', isDelete:false, }); },
deleteItem(){ /* Traversal array , Then get the corresponding subscript according to the selected state , Then delete it */ 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>
  The effect picture is as follows :