,,,我们在输入银行账号会设置每四位添加一个空格,输入金额,每三位添加一个空格。那么,在vue, element-ui组件中,如何实现呢?
& lt; el-table-column道具=罢驶А北昵?耙姓撕拧痹?
& lt;模板slot-scope=胺段А北?
& lt; el-input类型=拔谋尽弊畲蟪ざ?v模型=" scope.row“23”。账户”占位符="请输入银行账号”
@change=" validateNum(范围。美元指数)“祝辞& lt;/el-input>
& lt;/template>
& lt;/el-table-column>//输入银行卡号
validateNum(指数){
this.setNum (this.supplierObjs。supplierBankAccount指数)
}，//设置银行卡号,每四位添加一个空格
setNum(数据、索引){
数据。forEach((元素,i)=比;{
元素。账户=element.account。替换(\ s/g,”)。替换(/^ \ [d]/g) .replace (/(\ d {4}) (& # 63;=\ d)/g, 1美元)
这一点。设置美元(元素、“帐户”element.account)
})
},
,,1,在组件的改变事件中添加实现方法(因为我们的业务需求是可以添加多个银行卡号,所以用指数做了区分),取出每行的值;
,,2,用<代码>元素。账户=element.account。替换(\ s/g,”)。替换(/^ \ [d]/g,”) .replace (/(\ d {4}) (& # 63;=\ d)/g, 1美元)>
,,3、<代码>。设置美元(元素、“帐户”element.account)>
,,,,,,,,实现起来也非常简单,但是因为element-UI没有提供输入设置的方法,所以需要自己根据需求完善一下。
& lt; !DOCTYPE html公共”——//W3C XHTML 1.0//DTD过渡//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”的在
& lt; html xmlns=" http://www.w3.org/1999/xhtml " xml: lang=癳n”比;
& lt; head>
& lt;元http-equiv=? type”内容=" text/html; charset=utf - 8”比;
& lt; title> Document
& lt;脚本src=" https://www.yisu.com/zixun/js/jQuery.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; script>
var num=0;
函数inputAccount () {
var str=$(' #银行卡').val ();
var elem=. getelementbyid(“银行卡”);
console.log (elem);
如果(str)。长度比;num) {
var c=str.replace (\ s/g, " ");
如果(str !=" ",,c。长度比;4,,c。长度% 4==1){
$(' #银行卡').val (str。substring (0, str.length - 1) + " " + str.substring (str。str.length长度- 1));
}
}
如果(elem.setSelectionRange) {//W3C
setTimeout(函数(){
elem.setSelectionRange (elem.value.length elem.value.length);
elem.focus ();
}, 0);
}如果(elem.createTextRange) {//IE
var textRange=elem.createTextRange ();
textRange.moveStart(“字符”,elem.value.length);
textRange.moveEnd("性格",0);
textRange.select ();
}
num=str.length;
}
& lt;/script>
& lt;输入类型="文本" name=" id=耙锌ā?比;
& lt;/body>
& lt;/html>
& lt; !DOCTYPE html公共”——//W3C XHTML 1.0//DTD过渡//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”的在
& lt; html xmlns=" http://www.w3.org/1999/xhtml " xml: lang=癳n”比;
& lt; head>
& lt;元http-equiv=? type”内容=" text/html; charset=utf - 8”比;
& lt; title> Document
& lt;脚本src=" https://www.yisu.com/zixun/js/jQuery.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt;输入类型="文本" name=" id="盒子"/比;
& lt; script>
$(函数(){
$(" #箱”).keyup(函数(){=https://www.yisu.com/zixun/$ var值(这).val () .replace (/s/g,”) .replace (/(\ d {4}) (& # 63;=\ d)/g,“$ 1”);
(美元).val(值)
})
})
& lt;/script>
& lt;/body>
& lt;/html>
以上所述是小编给大家介绍的vue中Element-ui输入银行账号每四位加一个空格的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
