Vue处理表单校验

1、vue使用element-ui的form表单验证

问题描述：第一次点击新增时正常，第二次新增打开d窗后由于表单内容为空，出现验证这种情况。

解决 ： this$refsstaffFormresetFields();//等d窗里的form表单的dom渲染完在执行this$refsstaffFormresetFields()，去除验证（clearValidate），（resetField表单重置）

//打开d窗的新增方法

addStaff() {

      thisstaffVisible = true;//d窗打开

      this$nextTick(()=>{

         this$refsstaffFormresetFields()

        this$refsstaffFormclearValidate()

      });

},

在 Vue 前端表格展示 number 类型的数值时，如果数值过长，可能会出现展示不完全的情况，为了保持页面的美观和易读性，我们需要对数字进行四舍五入处理。下面是一些可能出现的问题以及解决方法：

1 数字展示异常，出现 NaN 或者 Infinity

当显示的数字过大或过小时，可能会出现 NaN 或 Infinity 的情况，这是因为 JavaScript 对浮点数的精度有限，而且对于一些超出范围的数字，计算机并不能准确表示，从而出现这种情况。建议在进行数值计算时，使用 Number 类型的数据，并避免使用浮点数。

2 数字位数过长

当数字位数过长时，可以使用 toFixed 方法对数字进行四舍五入处理，将其保留指定位数的小数。例如：

```js

const num = 123456789;

const roundedNum = numtoFixed(2); // 1234568

```

3 表格展示格式不合适

在使用表格展示数字时，可以考虑对数字进行格式化处理，例如添加千分位分隔符、保留指定位数的小数等。可以使用第三方库如 numeraljs 或 accountingjs 来方便地完成此类 *** 作。例如：

```js

import numeral from 'numeral';

const num = 12345678;

const formattedNum = numeral(num)format('0,0'); // 12,345,678

```

ElementUI的表格要求的数据类型为字典数组。我使用了python3写后端，那么从数据库取数据时添加一行cursorclass=pymysqlcursorsDictCursor即可。取出后我将其存入redis数据库方便之后取用。取用时使用eval()函数再传到前端即可。

前端放置Pagination 分页器，我这里直接采用了完整功能的分页器。

<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="datalength"> </el-pagination>

其中：handleSizeChange为pagesize发生改变时的相应函数，handleCurrentChange为currentPage发生改变时的相应函数。

page-sizes为所有可选择的page-size。可以自己更改其中的数字。

layout为附带的功能，一般不用动它。

total为总数据数。由于是字典数组，直接使用length方法即可得到总数据数。

data () { return { data: [], currentPage:1, pagesize:20, } },

初始页currentPage、初始每页数据数pagesize和数据data

methods: { handleSizeChange: function (size) { thispagesize = size; }, handleCurrentChange: function(currentPage){ thiscurrentPage = currentPage; } }

上面的两个响应函数，很好理解。

本地应用：

指令v-text的作用是：设置标签的内容

默认写法会替换全部内容，使用插值表达式{{}}可以替换指定内容

部分替换使用两个大括号写法

v-html指令：作用是设置元素的innerHTML

内容中有html结果会被解析为标签；v-text无论内容是什么，只会解析为文本

解析文本用v-text，解析html结构用v-html

v-on指令： 事件绑定的方法写成函数调用的形式，可以传入自定义参数

定义方法时需要定义形参来接受传入的实参

时间的后面跟上修饰符可以对事件进行限制

enter可以限制触发的按键为回车

时间修饰符有多种

计数器的步骤：

1在data中定义数据num；

2methods中添加两种方法add和sub

3使用v-text给num设置span标签

4使用v-on将add，sub绑定给+、-按钮

5add逻辑小于10继续累加，否则alert

6sub逻辑大于0继续递减，否则alert

创建Vue示例时，el（挂载点），data（数据），methods（方法）

v-on指令的作用是绑定事件，简写为@

方法中通过this，关键字获取data中的数据

v-text设置文本值，简写{{}}

v-show指令的作用是：根据真假切换元素的显示状态

原理是修改元素的display，实现显示和隐藏

指令后面的内容，最终都会解析为布尔值

值为true元素显示，值为false元素隐藏

v-if指令的作用是：根据真假切换元素的显示状态

本质是通过 *** 纵dom元素来切换显示状态

表达式的值为true，元素存在于dom树中，为false，从dom树中移除

v-bind指令的作用是：为元素绑定属性

完整写法是v-bind：属性名

简写的话可以直接省略v-bind，只保留：属性名

需要动态的增删class建议使用对象的方式

v-for指令的作用是：根据数据生成列表结构

数组经常和v-for结合使用

语法是（item，index）in 数据

item和index可以结合其他指令一起使用

数组长度的更新会同步到页面上，是响应式的

v-model指令的作用是便捷的设置和获取表单元素的值

绑定的数据和表单元素值相关联

绑定的数据双向绑定表单元素的值

网络应用

以上就是关于Vue处理表单校验全部的内容，包括:Vue处理表单校验、vue前端表格展示number类型太长数值四舍五入为什么、vue 怎样获取表格的行号等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！