码迷,mamicode.com
首页 > 其他好文 > 详细

elementUI动态添加

时间:2019-10-19 19:00:26      阅读:688      评论:0      收藏:0      [点我收藏+]

标签:length   删除   NPU   contact   back   动态   blur   nta   数组   

elementUI动态添加

技术图片

 

 

 添加描述:

<el-form-item 
  v
-for="(item, index) in ruleForm.domains" domaina是存放绑定值的数组
  
:key="item.key"
  :prop="‘domains.‘ + index + ‘.textareb‘" textareb是输入框绑定的值
  :rules="{
  required: true,
  message: ‘请填写课程介绍‘,
  trigger: ‘blur‘}
"

> <el-input type="textarea" v-model="item.textareb" maxlength="300"style="width:524px;margin-left:16px" resize="none" class="aaaaaaaaaaaaa"> </el-input> <el-button type="primary" icon="el-icon-delete" class="addBtn" @click.prevent="inputRemove(item)"> item这个参数就是绑定的值
    <i>删除</i>
</el-button> </el-form-item>

data中:
  domains: [
          {
            textareb: ""
          }
        ]
 
事件用到push:
// 添加备注按钮
    addDesc() {
      // alert(111);
      this.ruleForm.domains.push({
        textareb: "",
        key: Date.now()
      });
    }
   
inputRemove(item) {
      // alert(item);
      var index = this.ruleForm.domains.indexOf(item);
      if (index !== -1) {
        this.ruleForm.domains.splice(index, 1);
      }
    }

 

DIV

<div class="textarebDiv" v-for="(v, i) in list">
                    <el-button
                      type="primary"
                      icon="el-icon-delete"
                      class="addBtn aadaadBtn"
                      @click.prevent="divRemove(i)"
                      style="background:none"
                      ><i>删除</i></el-button
                    >
</div>

data中:
 list: [{ contactType: "", number: "" }]
 
事件
addImg() {
      this.list.push({ contactType: "", number: "" });
    },
// div中的删除事件‘
    divRemove(i) {
      this.list.splice(i, 1);
    }

 

elementUI动态添加

标签:length   删除   NPU   contact   back   动态   blur   nta   数组   

原文地址:https://www.cnblogs.com/home-/p/11704698.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!