element表单动态添加删减

最新推荐文章于 2024-07-04 16:58:18 发布

csstmg

最新推荐文章于 2024-07-04 16:58:18 发布

阅读量1.1k

点赞数

分类专栏：前端 element 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/csstmg/article/details/106497916

版权

前端同时被 2 个专栏收录

171 篇文章 1 订阅

订阅专栏

element

104 篇文章 0 订阅

订阅专栏

在这里插入图片描述

加减符号

<span v-if="form.educationBackgroundVos" class="rightadd">
            <i class="el-icon-circle-plus-outline insert-icon" @click="flag && additem('education')" />
            <i v-if="index>0" class="el-icon-remove-outline delete-icon" @click="flag && delitem('education', item)" />
          </span>

方法处理

this.form.educationBackgroundVos 为 []


// 加号 添加
    additem(differ) {
      // 教育
      differ === 'education' && this.form.educationBackgroundVos.push({
        data1: [],
        employeeId: '', // 员工ID
        endTime: '', // 教育结束时间
        graduateState: '', // 是否毕业 1是 0否
        major: '', // 专业/学位
        reference: '', // 证明人
        referencesPhone: '', // 证明人联系电话
        schoolName: '', // 学校名称
        startTime: '' // 教育开始时间
      })
    },
    // 减号 删除
    delitem(differ, item) {
      if (differ === 'education') {
        const idx = this.form.educationBackgroundVos.indexOf(item)
        idx !== -1 && this.form.educationBackgroundVos.splice(idx, 1)
      }
    },

/deep/.el-icon-circle-plus-outline{
    line-height: 1.5;
  }
  /deep/.el-icon-remove-outline{
    line-height: 1.5;
  }
  .insert-icon {
    font-size: 20px;
    color: #39f;
    cursor: pointer;
    // margin-left: 10px;
  }
  .delete-icon {
    font-size: 20px;
    color: red;
    cursor: pointer;
  }