Element Table 编写自定义指令实现单元格中文本框接收数据格式控制

crazybai0001

已于 2022-10-15 15:00:50 修改

阅读量443

点赞数

分类专栏： Element UI VUE 文章标签： vue.js 前端 elementui

于 2022-10-12 19:23:45 首次发布

本文链接：https://blog.csdn.net/crazybai0001/article/details/127288696

版权

下图中有多个表格，每个表格中的部分单元格中放置了文本框（input），用户在向文本框中输入数据时，前端需要进行限制、控制，比如说允许输入数据的规则如下：

1、只能输入数值（不能输入正负号）；

2、整数部分最多允许输入5位，小数部分最多允许输入5位；

3、当输入的是以0开头，且第二位不是小数点的数据时，自动移除0（比如输入01，会自动变成1);

在多个表格的多个单元格的文本框中输入数据时均需要进行上述验证，而且这种验证可能将来会在别的页面、模块中使用，所以考虑代码的复用、可维护、可移植、简洁，文中使用VUE全局指令实现这个功能，下面进行讲解：

1、需求

2、在项目合适的目录中编写自定义指令文件

3、自定义指定文件（inputValueRules.vue）代码实现

<script>
/**
 * 全局自定义指令，定义文本框接受数据的规则，指令名称：InputValueRulesInteger、InputValueRulesDecimal
 * el 自定义指令所在对象
 * params 模板向指令传递的参数，参数在

关注