vue 动态添加el-input的实现逻辑

目录
  • 一、效果图
  • 二、实现逻辑

一、效果图

二、实现逻辑

  • 将需要动态添加的表单项项的绑定值存为一个数组
  • 以循环的方式展示form表单
  • 点击`+`按钮触发事件,向数组中新加一个item
  • 点击`-`按钮触发事件,根据循环的得到的index来删除数组中相对应位置的item三、代码实现
<template>
  <div>
    <el-button @click="isDilogShow = true" plain>动态添加input</el-button>
    <el-dialog
      title="特工安排"
      :visible.sync="isDilogShow"
      :close-on-click-modal="false"
      width="400px"
    >
      <el-form ref="form" :model="form">
        <el-form-item>
          <div v-for="(item, index) in List" :key="index" class="content">
            <el-form-item>
              <el-input
                class="numrule"
                type="number"
                style="max-width: 130px"
                v-model.number="item.num"
                placeholder="请输入代号"
                @input="
                  (val) => {
                    handleNumChange(val, index)
                  }
                "
              ></el-input>
              <span>搭档为</span>
              <el-select
                v-model="item.name"
                placeholder="请选择"
                style="max-width: 130px"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
              <!-- 若表单中没有值则不可以新增item(可根据自己的需求进行更改哦) -->
              <span
                v-if="index === 0"
                :class="
                  item.num === null || item.name === ''
                    ? 'change-icon-add'
                    : 'change-icon'
                "
                ><i
                  :style="{
                    pointerEvents:
                      item.num === null || item.name === '' ? 'none' : 'auto',
                  }"
                  class="el-icon-circle-plus-outline"
                  @click="addItem()"
                ></i
              ></span>
              <span v-else class="change-icon" @click="deleteItem(index)"
                ><i class="el-icon-remove-outline"></i
              ></span>
            </el-form-item>
          </div>
        </el-form-item>
        <el-form-item style="text-align: right;">
          <el-button @click="isDilogShow = false">取消</el-button>
          <el-button type="primary" @click="onSubmit">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "About",
  data() {
    return {
      isDilogShow: false,
      form: {
        name: "",
      },
      List: [{ num: "", name: "" }],
      userList: [
        { id: 1, name: "麻雀" },
        { id: 2, name: "夜莺" },
        { id: 3, name: "百灵" },
      ],
    }
  },
  methods: {
    handleNumChange(v, i) {
      console.log(v)
      console.log(i)
    },
    onSubmit() {
      console.log("submit!")
    },
    // 新增任务分配
    addItem() {
      this.List.push({
        num: "",
        name: "",
      })
    },
    deleteItem(i) {
      this.List.splice(i, 1)
    },
  },
}
</script>
<style lang="scss">
.content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  span{
    margin: 0 8px;
  }
  .change-icon {
    font-size: 26px;
    cursor: pointer;
  }
  // 点击事件是否可用 ----> pointer-events:none;
  .change-icon-add {
    font-size: 26px;
    cursor: no-drop;
  }
}
.numrule {
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  /* Firefox浏览器 */
  input[type="number"] {
    -moz-appearance: textfield;
  }
}
</style>

到此这篇关于vue 动态添加el-input的文章就介绍到这了,更多相关vue 动态添加el-input内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue中el-input绑定键盘按键(按键修饰符)

    vue怎么写键盘事件 vue允许将按键值作为修饰符来使用,如监听回车事件,有两种写法,如下代码: <input type="text" @keyup.13="console.log($event)"></input> <input type="text" @keyup.enter="console.log($event)"></input> 但要注意的是:当我们在在el-inpu

  • vue.js项目 el-input 组件 监听回车键实现搜索功能示例

    基于element-ui 组件 开发的vue.js项目, 实现回车键发起搜索,和原生的input 标签使用方法不一样: el-input 监听键盘按下状态 得用@keyup.enter.native,如果是非el-input 组件,可以直接用@keyup.enter <el-input placeholder="搜索" icon="search" v-model="input" :on-icon-click="pchandleIc

  • vue:el-input输入时限制输入的类型操作

    通过@keyup.native的时间动态监控输入的类型 1.手机号码,只能是数字,如果输入了非数字直接清空 2.身份证号码,除了Xx和数字其余的一律清空 3.基于1.2两种情况下,还有一种是动态创建的字段(也就是v-for出来的),解决方法:先使用split形成字段数组,使用for循环找到最后一个点的前面的字段,方便使用$set更新和渲染页面 setDelMsicStr(field,type){ let props let len let value let newphoestr let ite

  • vue使用element-ui的el-input监听不了回车事件的解决方法

    原因 今天在使用element-ui时,el-input组件监听不了回车事件,如下代码没有想要的效果: <el-input class="search-input" placeholder="请输入内容" v-model="searchText" @keyup.enter="search()"></el-input> 原因应该是element-ui自身封装了一层input标签之后影响了事件的监听,在el

  • vue 动态添加el-input的实现逻辑

    目录 一.效果图 二.实现逻辑 一.效果图 二.实现逻辑 将需要动态添加的表单项项的绑定值存为一个数组 以循环的方式展示form表单 点击`+`按钮触发事件,向数组中新加一个item 点击`-`按钮触发事件,根据循环的得到的index来删除数组中相对应位置的item三.代码实现 <template> <div> <el-button @click="isDilogShow = true" plain>动态添加input</el-button&g

  • vue 动态添加class,三个以上的条件做判断方式

    如果 status为1,样式为redRoom 如果 status为2,样式为greenRoom1 如果 status为其他,样式为greenRoom2 :class="{'redRoom': Number(items.status) === 1, 'greenRoom1': Number(items.status) === 2, greenRoom2: Number(items.status) > 2}" 补充知识:vue 根据变量值来判断显示class 我就废话不多说了,大家还

  • vue 动态添加的路由页面刷新时失效的原因及解决方案

    目录 问题描述 场景 接口返回 前端菜单定义 vuex中的方法 出现的问题 原因分析 解决方案 实现代码 route/index.js的导航守卫中添加逻辑判断 总结 问题描述 昨天在做vue后台管理系统有关权限页面动态添加到路由的功能时,遇到一个问题:动态添加的路由页面,在页面刷新时出现了404的情况. 场景 后台管理系统的权限控制是通过在前端页面定义权限code, 把code给后台同学保存配置到表中,之后根据后台返回的权限code列表与前端页面配置的code菜单列表做筛选匹配,code相等的页

  • vue动态添加store、路由和国际化配置方式

    目录 vue动态添加store,路由和国际化 vue动态添加store vue动态添加路由 vue动态加载国际化 前端项目中用vue-i18n实现国际化 在项目中安装国际化包的依赖 配置文件 异步方式引入,一次只加载一种国际化包 非异步步方式,每次加载所有的包 使用 切语言 vue动态添加store,路由和国际化 vue动态添加store 想写组件库?用这个吧 … // store module标准格式 import demo from '@/store/modules/demo' $store

  • 详解Vue 动态添加模板的几种方法

    以下方法只适用于 Vue1.0 版本,推荐系数由高到低排列. 通常我们会在组件里的 template 属性定义模板,或者是在 *.vue 文件里的 template 标签里写模板.但是有时候会需要动态生成模板的需求,例如让用户自定义组件模板,或者设置组件的布局. 例如要做一个类 select 的组件,用户传入 options 数据,通过 value prop 获取选中值,最基本的原型如下. Vue.component('XSelect', { template: ` <div class="

  • Vue 动态添加路由及生成菜单的方法示例

    写后台管理系统,估计有不少人遇过这样的需求:根据后台数据动态添加路由和菜单. 为什么这么做呢?因为不同的用户有不同的权限,能访问的页面是不一样的. 在网上找了好多资料,终于想到了解决办法. 动态生成路由 利用 vue-router 的 addRoutes 方法可以动态添加路由. 先看一下官方介绍: router.addRoutes router.addRoutes(routes: Array<RouteConfig>) 动态添加更多的路由规则.参数必须是一个符合 routes 选项要求的数组.

  • vue动态添加路由addRoutes之不能将动态路由存入缓存的解决

    在我不知道vue的路由还可以通过addRoutes动态添加时,我只知道vue的路由都是写死在路由表中的,每当跳转时再去加载相应的路由.直到在一个新公司接到需要根据用户的权限显示不同的菜单的需求时才知道了原来vue-router还有一个addRoutes的API,立马研究了一下. router.addRoutes: 函数签名: router.addRoutes(routes: Array<RouteConfig>) 动态添加更多的路由规则.参数必须是一个符合routes选项要求的数组. 点这里去

  • 详解如何在Vue中动态添加类名

    目录 静态和动态类 有条件的类名 使用数组语法 使用对象语法 与自定义组件一起使用 快速生成类名 使用计算属性来简化类 能够向组件添加动态类名是非常强大的功能.它使我们可以更轻松地编写自定义主题,根据组件的状态添加类,还可以编写依赖于样式的组件的不同变体. 添加动态类名与在组件中添加 prop :class="classname"一样简单.无论classname的计算结果是什么,都将是添加到组件中的类名. 当然,对于Vue中的动态类,我们可以做的还有很多.在本文中,我们将讨论很多内容:

  • 在Vue组件上动态添加和删除属性方法

    如下所示: 在组件上添加属性 this.$set(this.data,"obj",value'); 删除属性this.$delete(this.data,"obj",value'); 以上这篇在Vue组件上动态添加和删除属性方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue.js动态添加.删除选题的实例代码 详解Vue 动态添加模板的几种方法

  • vue中动态添加class类名的方法

    vue 动态添加class类名,灵活得让你发狂,下面示例几个 <template> <div> <h2>动态添加类名</h2> <!-- 第一种方式:对象的形式 --> <!-- 第一个参数 类名, 第二个参数:boolean值 --> <!-- 对象的形式: 用花括号包裹起来,类名用引号, --> <!-- 优点: 以对象的形式可以写多个,用逗号分开 --> <p :class="{'p1'

随机推荐