VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除

简介: VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除

需求:点击按钮新增指定表单,可动态删除,新增上限为10条

实现步骤:

定义模板:.
完整代码及样式

<div class="customer-dialog">
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :before-close="cancel"
    width="52.5%"
    :destroy-on-close="true"
    :close-on-click-modal="false"
  >
    <el-form
      ref="form"
      class="customer-form"
      :model="form"
      label-width="97px"
      :inline="true"
      :rules="rules"
      label-suffix=":"
    >
      <el-form-item label="客户名称" prop="customerName" class="form-style">
        <el-input v-model.trim="form.customerName" placeholder="请输入" maxlength="30" size="small" class="input-style" />
      </el-form-item>
      <el-form-item label="客户代码" prop="customerCode" class="form-style">
        <el-input v-model.trim="form.customerCode" placeholder="请输入" maxlength="30" size="small" class="input-style" />
      </el-form-item>
      <el-form-item label="账期" prop="payment" class="form-style">
        <el-input v-model.trim="form.payment" placeholder="请输入" maxlength="30" size="small" class="input-style" />
      </el-form-item>

      <el-form-item label="结算币种" prop="" class="form-style">
        <el-select v-model="form.currency" placeholder="请选择" size="small">
          <el-option
            v-for="item in currencyTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="所属地区" prop="" class="form-style">
        <el-select v-model="form.currency" placeholder="请选择" size="small">
          <el-option
            v-for="item in currencyTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="开户行" prop="" class="address form-style" style="width:100%">
        <el-input v-model.trim="form.phone" placeholder="请输入" maxlength="50" size="small" style="width:100%" />
      </el-form-item>

      <el-form-item label="账号" prop="" class="address form-style" style="width:100%">
        <el-input v-model.trim="form.phone" placeholder="请输入" maxlength="50" size="small" style="width:100%" />
      </el-form-item>

      <el-form-item label="税号" prop="" class="address form-style" style="width:100%">
        <el-input v-model.trim="form.phone" placeholder="请输入" maxlength="50" size="small" style="width:100%" />
      </el-form-item>

      <!-- 特殊表单 -->
      <div v-for="(item, index) in form.dynamicItem" :key="index" style="height: 51px">
        <el-form-item label="联系人" class="form-style">
          <el-input v-model="item.name" size="small" class="special-style" />
        </el-form-item>
        <el-form-item
          label="联系电话"
          class="form-style"
          :prop="'dynamicItem.' + index + '.phone'"
          :rules="[
            {required: false, message: '手机号不能为空', trigger: 'blur'},
            { pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码' }
          ]"
        >
          <el-input v-model="item.phone" size="small" class="special-style" />
        </el-form-item>
        <el-form-item label="收货地址" class="form-style">
          <el-input v-model="item.address" size="small" class="special-style" />
        </el-form-item>
        <el-form-item>
          <el-button v-if="index+1 == form.dynamicItem.length" type="primary" size="mini" @click="addItem(form.dynamicItem.length)">+</el-button>
          <el-button v-if="index !== 0" type="danger" size="mini" @click="deleteItem(item, index)">-</el-button>
        </el-form-item>
      </div>
      <!-- *** -->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="cancel">取 消</el-button>
      <el-button size="small" type="primary" @click="handleSave('form')">保 存</el-button>
    </div>
  </el-dialog>
</div>

data中定义:

data(){
    return{
        form: {
        dynamicItem: [
        //默认显示一条
          {
            name: '',
            phone: '',
            address: ''
          }
        ]
      }
    }
}

methods中定义方法:

methods:{
    //新增方法
    addItem(length) {
      if (length >= 10) {
        this.$message({
          type: 'warning',
          message: '最多可新增10条!'
        })
      } else {
        this.form.dynamicItem.push({
          name: '',
          phone: '',
          address: ''
        })
      }
    },
    //删除方法
    deleteItem(item, index) {
      this.form.dynamicItem.splice(index, 1)
    },
}

样式:

<style lang="scss">
  .customer-dialog{
    .customer-form{
      height: 320px;
      overflow-y: auto;
      overflow-x: hidden;
    }
    .address{
        .el-form-item__content{
          width: 89%;
        }
        .el-input__inner{
          width: 100%;
        }
    }
    .form-style{
      margin-bottom: 10px;
      .input-style{
        width: 215px;
      }
      .special-style{
        width: 194px;
      }
    }
    /**滚动条的宽度*/
    ::-webkit-scrollbar {
      width: 8px;
    }
    //滚动条的滑块
    ::-webkit-scrollbar-thumb {
      background-color: #ccc;
      border-radius: 5px;
    }
  }
</style>

看效果:
默认状态:
在这里插入图片描述
点击新增:
在这里插入图片描述
动态删减,非常的完美。

相关文章
|
3天前
|
JavaScript
VUE之彩虹点击
VUE之彩虹点击
5 1
|
22天前
|
JavaScript
|
4天前
|
JSON 移动开发 JavaScript
Vue03基础语法(样式绑定、事件处理器、表单、自定义指令、vue组件、组件通信【自定义事件】)
Vue03基础语法(样式绑定、事件处理器、表单、自定义指令、vue组件、组件通信【自定义事件】)
10 0
|
28天前
|
存储 JavaScript 前端开发
Vue.js表单开发宝藏工具集,让构建表单变得轻松又酷炫!
Vue Tiny Validate 是最小的验证库,如果你只需要最基本的功能,它可以帮你减轻负担。
25 3
vue3+element plus图片预览点击按钮直接显示图片的预览形式
vue3+element plus图片预览点击按钮直接显示图片的预览形式
|
22天前
|
JavaScript 前端开发 API
|
1月前
|
JavaScript
VUE里修改element-ui的显示层次与上下间隔
VUE里修改element-ui的显示层次与上下间隔
31 1
|
1月前
|
JavaScript
vue element ui 打开弹窗出现黑框问题
vue element ui 打开弹窗出现黑框问题
37 1
|
1月前
|
JavaScript 前端开发 安全
表单处理:使用 Vue 进行表单验证和提交
【4月更文挑战第22天】Vue 提供了便捷的表单组件和验证规则,支持实时用户输入验证和错误消息显示,确保数据正确性。通过封装验证逻辑和处理异步验证,增强代码复用和安全性。同时,关注用户体验,如清晰的指示和错误反馈,防止 CSRF 攻击,实现高效、安全的表单处理。