点击按钮追加元素删除元素

最新推荐文章于 2024-05-01 06:00:24 发布

二鹏゜

最新推荐文章于 2024-05-01 06:00:24 发布

阅读量304

点赞数

文章标签： Vue 前端开发列表管理增删按钮双向数据绑定

本文链接：https://blog.csdn.net/weixin_54398008/article/details/123272310

版权

<el-row class="addBtn">
    <el-col :span="4" ><el-button size="mini" tyle="text" icon="el-icon-plus" @click="addProBtn">添加</el-button></el-col>
    <el-col :span="4"><el-button size="mini" tyle="text" icon="el-icon-close" :disabled="addProIndex === 0" @click="deleteProBtn">删除</el-button></el-col>
</el-row>
<el-row>
  <div class="addContent" >
    <el-row style="padding-left: 5px;background-color: #E1FBFB" v-for="(item,index) in addList" :key="index">
         <el-col :span="1"><el-checkbox @change="consoled(item)"></el-checkbox></el-col>
         <el-col :span="23"><el-input v-model="item.id" style="width: 99%"></el-input></el-col>
     </el-row>
  </div>
</el-row>


data() {
    return {
      addProIndex: 0, //新增列表项元素下标
      addList: [],
    };
  },



/**
* 追加列表项
*/
addProBtn() {
  this.addOpen = true;
  this.multipleOpen = false;
  this.addProIndex += 1;
  this.addProType = '列表项' + this.addProIndex;
  this.addList.push({
    id:this.addProType
  })
},
/**
* 删除列表项
*/
deleteProBtn() {
  this.addProIndex -= 1;
  this.addList.splice(this.addProIndex, 1);
},