element表单动态添加删减

最新推荐文章于 2023-12-26 11:26:18 发布

原创最新推荐文章于 2023-12-26 11:26:18 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

前端同时被 2 个专栏收录

171 篇文章

订阅专栏

element

104 篇文章

订阅专栏

本文介绍了一种基于Vue的教育背景信息动态增删组件实现方法，通过加减按钮控制教育经历的添加与删除，详细解析了代码逻辑及样式设置。

在这里插入图片描述

加减符号

<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;
  }