vue+element项目动态添加删除数据div

vue+element项目动态添加删除数据div

效果如下：

1、初始状态

2、点击添加两条数据

3、删除第一条数据

代码如下：

<el-form-item>
    <p>任务内容：p>
    <el-button type="primary" v-on:click="addTest">添加el-button>
el-form-item>
<div>
    
      <p>任务{{index+1}}:p>
        
            <el-option label="参与竞拍" value="0">el-option>
            <el-option label="参与夺宝" value="1">el-option>
            <el-option label="商城购物" value="2">el-option>
            <el-option label="发送红包" value="3">el-option>
            <el-option label="邀请好友" value="4">el-option>
            <el-option label="玩小游戏" value="5">el-option>
            <el-option label="看小视频" value="6">el-option>
        el-select>
        
            <el-option label="天数" value="0">el-option>
            <el-option label="次数" value="1">el-option>
            <el-option label="时长" value="2">el-option>
            <el-option label="个数" value="3">el-option>
        el-select>
        el-input>
        
获得DC的比例：p>
        el-input>  %
        <el-button type="danger" @click.prevent="deleteTest(index)">删除el-button>
    el-form-item>
div>

export default {
    data(){
        return{
            items : [],
        }
    },
    methods: {
        addTest(){
            this.items.push({
              task_cate: '',
              finish_cate: '',
              finish_value: '',
              dc_rate:''
            })
        },
        deleteTest(index){
            this.items.splice(index, 1)
        },
    },
}