精华内容
下载资源
问答
  • el-input-number
    2022-05-06 08:37:15

    问题描述:前端提交form表单要求el-input/el-input-number,不能输入 @#¥%……&*……
    分析问题:在事件或者方法中把字符串替代成空
    解决问题:
    1)
    在mian.js中添加【vue原型上添加方法,便于全局使用】

    Vue.prototype.validForbid = function (value, number = 255) {
      value = value.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘’,。、]/g, '').replace(/\s/g, "");
      if (value.length >= number) {
        this.$message({
          type: "warning",
          message: `输入内容不能超过${number}个字符`
        });
      }
      return value;
    }
    

    2)
    在html中加上@input触发的方法

    <el-input
      :value="form.name"
      @input="e => form.name = validSe(e)"
      maxlength="10"
      placeholder="过滤特殊字符长度10"
    ></el-input>
    
    更多相关内容
  • 分组预设,预设控制组件简述limit-input-number基于element-ui的el-input-number控件基础改造,所以本组件依赖element-ui limit-input-number可直接替换el-input-number安装yarn add vue-limit-input-group 或者npm ...
  • ├── vue-number-input.js (UMD, default) ├── vue-number-input.min.js (UMD, compressed) ├── vue-number-input.esm.js (ECMAScript Module) └── vue-number-input.esm.min.js (ECMAScript Module, ...
  • 使用自定义指令格式化el-input 背景 使用element开发的过程中遇到循环的数据只能输入数字,并且有不要小数点,有需要小数点的 ...el-input v-if=form.valuation_type==1 v-numberInt:0=item.first_fe
  • vue怎么写键盘事件 vue允许将按键值作为修饰符来使用,如...el-input监听不到键盘事件,原因是element-ui是封装组件,所以el标签属于自定义标签,因此触发不了键盘事件。 解决办法:加上.native原生事件修饰符即可。
  • <el-form-item label="次数" prop="Number"> 次数一:<el-input-number v-model="FirstNumber" :min="0" :max="100" :precision="0" label="次数一">el-input-number> 次 " WeekStyle">次数二:<el-input-number v-...
  • 在需要加入el-inputel-input-number的列使用template即可。

    实现效果:

     实现方法:

    <el-table class="drow_table" :data="tableData" style="width: 100%" row-key="id">
    					<el-table-column type="selection" width="45px"></el-table-column>
    					<el-table-column type="index" label="序号" width="50px"></el-table-column>
    					<el-table-column label="小数位数" property="digit" width="140px">
    						<template slot-scope="scope">
    							<el-input-number v-model="scope.row.digit" @change="handleChange" :min="0" :max="5" label="描述文字"></el-input-number>
    						</template>
    					</el-table-column>
    					<el-table-column label="上限" property="maxVal">
    						<template slot-scope="scope">
    							<el-input v-model="scope.row.maxVal"></el-input>
    						</template>
    					</el-table-column>
    					<el-table-column label="下限" property="minVal">
    						<template slot-scope="scope">
    							<el-input v-model="scope.row.minVal"></el-input>
    						</template>
    					</el-table-column>
    				</el-table>
    methods:{
    //  InputNumber 计数器
    		handleChange(value) {
    			console.log(value)
    		},}

    在需要加入el-input和el-input-number的列使用template即可。

    展开全文
  • el-input-numberel-table中的应用

    说一下需求:
    el table展示库存信息,然后需要选择本次消耗的库存
    名字和剩余库存不用多说,都是从后台拿来的
    对于 本次消耗 中的input-number有几个注意点:
    1、在最外层的table-column中,需要绑定prop,否则只能点击一次
    2、slot-scope需要传入本行信息,否者获取不到本行信息,连着后面的v-model也不能实现
    3、v-model绑定的是本行中的数据,如果绑定data中的值,则会导致脏数据,每一行数据都相同。

    <el-form-item label="库存" >
    				<el-table  :data="stock_options" style="width: 80%">
    					<el-table-column prop="name" label="名字"></el-table-column>
    					<el-table-column prop="num" label="剩余库存"></el-table-column>
    					<el-table-column prop="needNum" label="本次消耗" >
    						<template slot-scope="scope" >
    							<el-input-number v-model="scope.row.needNum" @change="inputChange(scope.row)" 
    							 :min="0" :max="50" label="描述文字">
    							</el-input-number>
    							<!-- slot-scope传入这一行数据,v-model绑定的是本行的needNum 、
    							-->
    						</template>
    					</el-table-column>
    				</el-table>
    			</el-form-item>
    

    结果图

    展开全文
  • 问题描述:项目中测试提出问题,在Input输入框中输入表情后,后台会报错,于是想着在前端输入的时候禁止输入表情,或者点击win10输入法后面的表情时,禁止输入表情 分析问题:一开始使用了排除法,让input只能输入...

    问题描述:项目中测试提出问题,在Input输入框中输入表情后,后台会报错,于是想着在前端输入的时候禁止输入表情,或者点击win10输入法后面的表情时,禁止输入表情

    分析问题:一开始使用了排除法,让input只能输入数字、字母。但是测试在用不同电脑测试,联想的笔记本电脑用"window+;"还是可以输入,通过复制表情查看,发现是字母。用简单的js去除就解决不了这个问题

    解决问题:
    在main.js中加入一些代码,自定义一个清除表情的属性。首先npm install emoji-regex

    import emojiRegex from 'emoji-regex';  // npm install emoji-regex
    Vue.directive('clearEmoij', {
      bind(el, binding, vnode, oldVnode) {
        const regex = emojiRegex();
        const obj = el.querySelectorAll('.el-input__inner,.el-textarea__inner')[0];
        const zclearNoNum = function(e) {
          if (e.target.composing) return;
          const match = regex.exec(obj.value); // 也可以直接用正则表达式判断
          if (match) {
            /* for (let i=0;i<match.length;i++) {
              obj.value = obj.value.replace(match[i],"");
            }*/
            obj.value = obj.value.replace(/(\ud83c[\udc00-\udfff])|(\ud83d[\udc00-\udfff])|(\ud83e[\udc00-\udfff])|[\u2100-\u32ff]|[\u0030-\u007f][\u20d0-\u20ff]|[\u0080-\u00ff]/g, '');
            zclearNoNum(e);
          }
          // 触发v-model的更新
          obj.dispatchEvent(new Event('input'));
        }
        const zblur = function(e) {
          zclearNoNum(e);
          setTimeout(() => {
            const match = regex.exec(obj.value);
            if (match) {
              obj.value = obj.value.replace(/(\ud83c[\udc00-\udfff])|(\ud83d[\udc00-\udfff])|(\ud83e[\udc00-\udfff])|[\u2100-\u32ff]|[\u0030-\u007f][\u20d0-\u20ff]|[\u0080-\u00ff]/g, '');
              zclearNoNum(e);
            }
            // 触发v-model的更新
            obj.dispatchEvent(new Event('change'));
          }, 50)
        }
        obj.onkeyup = zclearNoNum;
        obj.onblur = zblur;
     
     
        function onCompositionStart(e) {
          e.target.composing = true
        }
        function onCompositionEnd(e) {
          console.log('按回车将字输入', e.target.value)
          e.target.composing = false
          obj.dispatchEvent(new Event('change'));
          setTimeout(() => {
            if (obj.value) {
              obj.value = obj.value.replace(/(\ud83c[\udc00-\udfff])|(\ud83d[\udc00-\udfff])|(\ud83e[\udc00-\udfff])|[\u2100-\u32ff]|[\u0030-\u007f][\u20d0-\u20ff]|[\u0080-\u00ff]/g, '');
              zclearNoNum(e);
            }
            // 触发v-model的更新
            obj.dispatchEvent(new Event('change'));
          }, 50)
        }
        obj.addEventListener('compositionstart', onCompositionStart)
        obj.addEventListener('compositionend', onCompositionEnd)
      },
      update(el, binding, vnode, oldVnode) {}
    })
    

    然后在input表情中加入自定义指令v-clear-emoij即可

    <el-input v-model.trim="temp.name" v-clear-emoij :disabled="!formable" maxlength="30"/>
    
    展开全文
  • el-input-number

    千次阅读 2021-03-09 16:43:56
    element ui 在表格中使用el-input-number计数器遇到的坑 添加商品时按钮只能点击一次,编辑时又可以多次点击 原因:表格data中数据类型较为复杂且层级较深,vue监听不到,因此点击按钮时页面并没有发生改变 使用...
  • 3列的值是1列乘以2列计算得出的,并且1列和2列必须是正整数 首先想到的是下图这种办法,用v-model.number 加校验,只要...el-input-number完美的处理了我的需求 :min是可输入的最小值 :max是可输入的最大值,.
  • el-input-number禁用科学计数无果,换成el-input(type="number")
  • el-input-number入门学习

    2022-05-16 13:37:27
    1.el-input-number的使用 2.加入disabled 3.设置step 4.设置严格step 5.精度设置 代码效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...
  • Element el-input-number 计数器详解

    万次阅读 热门讨论 2021-02-02 11:46:39
    1. 用途 计数器是一种特殊的...el-input-number v-model="num1" label="请输入数量"></el-input-number> <el-divider></el-divider> 效果: 3. 指定最大、最小值 可以为计数器指定数值的最
  • el-input-number 参数及各种情况

    千次阅读 2022-06-23 18:21:35
    el-input-number 参数及各种情况
  • 问题遇到的现象和发生背景 使用el-table遇到一个大坑,情况是这样的,有个人需求,el-table的列是动态生成绑定数据,在使用插槽scope时,行内嵌套el-input-number,一共有4行数据,当在其中一行的一列中输入数字后,...
  • el-table找那个使用el-input-number

    千次阅读 2021-01-18 09:58:56
    最近使用el-table中需要计数,但是发现加上elementUI官网的代码发现只能触发一次,下面是解决办法,实用 <el-table-column ...el-input-number v-model="scope.row.count" controls-position="right
  • 步骤一、el-input-numbe所在列添加key,el-input-number中添加 @change="inputChange($event,‘num’)"方法 <el-table-column prop="num" label="数量" width="100" align="center" :key="tablekey"> <...
  • 这次的问题主要场景是新建时,要求一个el-form-item下有三个el-input-number,并且要校验。 以下是最终版: template里的内容 <el-form-item label="次数要求" prop="Frequency"> <div> <span>...
  • el-input-number 修改样式

    2022-05-07 16:48:19
    el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10" style="width:88px;"> </el-input-number> // 设置输入框的高度 /deep/ .el-input__inner { ...
  • el-input-number的问题

    2022-04-12 14:58:47
    最近在做一个表单 使用到了el-input-number发现了一个小小问题 在此记录一下 以免下次再犯 就是v-model绑定了值后 输入框的默认值会为0 – ( 我的默认值是空字符串 但是输入框里显示的是0 ) 后来发现绑定的值不能为...
  • el-input-number 只能输入证书
  • el-input-number change传参数

    千次阅读 2022-01-06 14:49:25
    el-input-number v-model="scope.row.number" style="width:100px;" :disabled="isDisabled" class="addpp-input-number" size="mini" :min="1" label="数量" @change="(currentValue, oldValue,)=>{...
  • 我在写一个el-input-number怎么想要显示的时候设置千分位,输入的时候就是本值(去掉千分位的值)显示千分位不改变v-model的值,我今天想破脑袋都没想出来各位请赐教呀!
  • 使用el-input-number 组件时,初始化数据总是为最小值,但是很多时候我们不想展示任何数据,此时我们只需要将初始值设置为 undefined 即可。
  • 查阅了众多方法找到一个简单的方法在此记录,原理是每次更新数据刷新table使他重新渲染。 在table中绑定key ...在inputNumber内 <el-table :data="tableData" border :key = "tablekey" style=
  • el-input-number
  • 设置 el-input-number 整数取值

    千次阅读 2021-10-31 13:24:39
    el-input-number v-model="option.startValue" controls-position="right" @change="handleChangeStartValue" :controls="false" @focus="handleblurNum" :precision="0"> </el-input-number
  • el-input-number无法实时监听数据变化的解决方法
  • el-input-number 如何设置初始值为空

    千次阅读 2022-04-07 17:42:35
    使用el-input-number 组件时,初始化数据总是为最小值,但是很多时候我们不想展示任何数据,此时我们只需要将初始值设置为 undefined 即可。如下:

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 33,102
精华内容 13,240
关键字:

el-input-number