element form rules 属性

转载

mob64ca1411e411 2024-12-03 23:24:49

文章标签 vue 自定义 Vue 重绘 文章分类 机器学习人工智能

ElementUI是怎么做表单验证的？在循环里对每个input验证怎么做呢？

model绑定表单数据,通过prop取表单数值，根据rule取form-item rules 或则rules[prop]校验

你有二次封装过ElementUI组件吗？

ElementUI怎么修改组件的默认样式？

方法一：/deep/
方法二：>>>
方法三：在外层添加一层div，设置自定义类名，再修改里边的样式, 格式.自定义类名 .需要修改的样式 {}。

ElementUI的穿梭组件如果数据量大会变卡怎么解决不卡的问题呢？

在 left-footer 的 slot 里面加个翻页组件，
并修改 filter-method 方法重绘穿梭机组件，
大概保持每页 50 条这样子。

ElementUI表格组件如何实现动态表头？

使用自定义表头，即中传入自定义 slot。表头整体结构变化则得自己 v-for 表头配置拼

<el-table-column> 重绘
<template v-for="item in tableColownms"> 
	<el-table-column v-if="item.type!='hidden'" :key="item.id" :prop="item.field" sortable :label="item.label"> 
</template>

ElementUI使用表格组件时有遇到过问题吗？

遇到表格的横向滚动条被固定列挡住的问题，在有合计的情况下（1：表格有横向滚动条，2：有固定列，3：底部有合计）满足这三个条件，
固定列的的宽度会把横向滚动条挡住，导致固定列下面滚动条不能拖动。

Object.freeze
这算是一个性能优化的小技巧吧。在我们遇到一些 big data的业务场景，它就很有用了。尤其是做管理后台的时候，经常会有一些超大数据量的 table，或者一个含有 n 多数据的图表，这种数据量很大的东西使用起来最明显的感受就是卡。但其实很多时候其实这些数据其实并不需要响应式变化，这时候你就可以使用 Object.freeze 方法了，它可以冻结一个对象(注意它不并是 vue 特有的 api)。
当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter，它们让 Vue 能进行追踪依赖，在属性被访问和修改时通知变化。
使用了 Object.freeze 之后，不仅可以减少 observer 的开销，还能减少不少内存开销。相关 issue。
使用方式：this.item = Object.freeze(Object.assign({}, this.item))