el-form 动态表单增减项 (vue+element ui)

这篇具有很好参考价值的文章主要介绍了el-form 动态表单增减项 (vue+element ui)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、点击”+“,弹出弹窗,新增一项,点击”-“,删除当前项

form表单加减数据,vue.js,javascript,前端,elementui

form表单加减数据,vue.js,javascript,前端,elementui

代码展示:

html代码:

注意:

el-form-item(表单项)循环,绑定的数组写在form当中

表单:

<el-form :model="form">
    <el-form-item label="设备类型:" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
        </el-select>
    </el-form-item>
    <el-form-item v-for="(item, index) in form.formItemData" :key="item.id" :label="item.label"
        :label-width="formLabelWidth">
        <div class="formItem">
            <el-input v-model="item.value" autocomplete="off"></el-input>
            <el-button v-if="form.formItemData.length - 1 == index" style="margin-left: 20px;"
                @click="addItem(item, index)">+</el-button>
            <el-button style="margin-left: 20px;" @click="delItem(item, index)">-</el-button>
        </div>
    </el-form-item>
</el-form>

新增参数弹框:

 <!-- 新增参数弹窗 -->
<el-dialog :close-on-click-modal="false" title="新增参数" :visible.sync="paramsVisible">
    <el-form :model="paramsForm">
        <el-form-item label="参数名称" label-width="120px">
            <el-input v-model="paramsForm.paramsName" autocomplete="off"></el-input>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="cancelParams">取 消</el-button>
        <el-button type="primary" @click="addParams">确 定</el-button>
    </div>
</el-dialog>

data:

//表单数据
form: {
        region: '',
        formItemData: [],
},

//新增弹窗数据
paramsVisible: false,
     paramsForm: {
     paramsName: "",
}

methods:

1、点击新增,弹出新增弹窗,添加表单项

// 新增选项
addItem(item, index) {
    console.log("添加", item, index)
    this.paramsVisible = true
},

// 取消参数弹窗
cancelParams() {
    this.paramsForm.paramsName = '';
    this.paramsVisible = false;
},

2、点击”-“,删除当前表单项文章来源地址https://www.toymoban.com/news/detail-786585.html

// 删除选项
delItem(item, index) {
    //item:当前表单项   index:当前项的下标
    console.log("删除", item, index)
    if (this.form.formItemData.length > 1) {
        this.form.formItemData.splice(index, 1)
    } else {
        this.$message({
            message: "最少保留一项",
            type: "warning"
        })
    }
},

到了这里,关于el-form 动态表单增减项 (vue+element ui)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue - Element el-form 表单对象多层嵌套校验

    针对el-form的数据源是对象嵌套对象,在进行数据绑定和校验时和单层的对象有一点区别, 具体是下面两部分: 数据源: 1、 给 el-form-item 的 prop 设为: prop=\\\"health.height\\\" 。 v-model 设为: v-model=\\\"fromData.health.height\\\" 2、校验规则 rules 对象对应的key设置为数据源内部的值: \\\'health.heig

    2024年02月14日
    浏览(54)
  • vue+element UI动态增减表单

        写在前面: 因为最近有个需求,需要新增联系人,而联系人数量并不确定,需要根据需要添加表单,一个联系人对应一个表单。    效果是这样的:     思路: ①写个div,把表单放在里面,旁边放2个按钮,添加和删除,且只有1个元素的时候不能显示删除按钮        

    2024年02月11日
    浏览(43)
  • vue3使用el-form实现登录、注册功能,且进行表单验证(Element Plus中的el-form)

    简介:Element Plus 中的 el-form 是一个表单组件,用于快速构建表单并进行数据校验。它提供了丰富的表单元素和验证规则,使表单开发变得更加简单和高效。可以搭配el-dialog实现当前页面的登录、注册页 ,这两天在vue3中用到了表单登录,特意记录一下,这里没有封装,直接使

    2024年02月07日
    浏览(73)
  • vue全家桶进阶之路43:Vue3 Element Plus el-form表单组件

    在 Element Plus 中, el-form 是一个表单组件,用于创建表单以便用户填写和提交数据。它提供了许多内置的验证规则和验证方法,使表单验证更加容易。 使用 el-form 组件,您可以将表单控件组织在一起,并对表单进行验证,以确保提交的数据符合预期的格式和要求。该组件具有

    2023年04月20日
    浏览(44)
  • element-ui的el-form表单和el-table校验嵌套使用校验el-input和el-select

    场景:前端开发中,经常会遇到比较多的表单填写页面,其中有el-form,el-table,表格的每一列中又嵌套着输入框或者下拉框,然后每个还需要做单独的校验 效果:   点击保存可校验el-input和el-select是否有值,不符合校验规则就标红提醒   1.el-form里面嵌套el-table 2.在el-table-column自定义内

    2024年02月02日
    浏览(53)
  • element-plus el-form 表单、表单验证 使用方法、注意事项

    element-plus@2.0.6 及之后的版本,表单验证不再是同步执行的了 另外, element-plus@2.1.4 及之后的版本,才可按照官方文档示例正常使用(使用的是两者的中间版本的话,最好先自行确认下正确的 上例中: 如果在“ 位置1 ”执行表单验证通过后的业务代码,可以去掉 async...await 如

    2024年02月05日
    浏览(63)
  • (vue)el-form表单隐藏校验星号

    写法:

    2024年02月08日
    浏览(46)
  • vue实现多个el-form表单提交统一校验

    通过以下两种方法实现多个表单的统一校验: 1. 定义模板内容 在 el-form 表单中添加 ref 属性来获取表单组件对象 2. 方法一 在上述代码中,我们给每个 el-form 表单添加了 ref 属性,分别为 form1 和 form2,在 submit 方法中,分别对两个表单使用 validate 方法进行表单校验 3. 方法二

    2024年02月13日
    浏览(47)
  • 【Element Ui】 vue3中修改el-form的rules后不触发自动校验,再次修改rules时清除验证信息

    项目要求:类型为“业务备货”的时候,“客户”为必填项 效果如下: 代码如下: 重点:

    2024年04月12日
    浏览(57)
  • el-form表单动态校验(场景: 输入框根据单选项来动态校验表单 没有选中的选项就不用校验)

    el-form常规校验方式: 正题部分-表单动态校验 场景: 输入框根据单选项来动态校验表单 没有选中的选项就不用校验 效果: 关键点: 跟正常校验流程不同的是, el-form-item标签内的required和rules都要加上判断条件

    2024年02月09日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包