前端面试-element ui类
1.ElementUI是怎么做表单验证的?在循环里对每个input验证怎么做呢?
model 绑定表单数据,通过prop取表单数值,通过编写ref进行后台API验证 ,根据rules进行表单内容验证
2.你有二次封装过ElementUI组件吗?
popover + button 的组件,点击该按钮后还有个二次确认或选择的交互。 InfiniteScroll 封装个简单的带触底加载的列表

1 <template> 2 <el-input 3 placeholder="价格" 4 v-model="current" 5 :disabled="disabled" 6 :maxlength="8" 7 @change="change" 8 ></el-input> 9 </template> 10 <script> 11 export default { 12 props: { 13 value: Number, 14 disabled: Boolean 15 }, 16 data() { 17 return { 18 current: "" 19 }; 20 }, 21 watch: { 22 value(val) { 23 if (val > 0) { 24 this.current = (val / 100).toFixed(2); 25 } else { 26 this.current = ""; 27 } 28 } 29 }, 30 created() { 31 if (this.value > 0) { 32 this.current = (this.value / 100).toFixed(2); 33 } else { 34 this.current = ""; 35 } 36 }, 37 methods: { 38 change() { 39 let value = this.current * 100 || 0; 40 this.current = (value / 100).toFixed(2); 41 this.$emit("input", value.toFixed(0) * 1); 42 } 43 } 44 }; 45 </script>
3.ElementUI怎么修改组件的默认样式?
方法一:/deep/ 方法二:>>> 方法三:在外层添加一层div,设置自定义类名,再修改里边的样式, 格式.自定义类名 .需要修改的样式 {}。
4.ElementUI的穿梭组件如果数据量大会变卡怎么解决不卡的问题呢? 在 left-footer 的 slot 里面加个翻页组件, 并修改 filter-method 方法重绘穿梭机组件, 大概保持每页 50 条这样子。
5.ElementUI表格组件如何实现动态表头?
1 | <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> |
6.ElementUI使用表格组件时有遇到过问题吗?
@isbase 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))
7.有阅读过ElementUI的源码吗?
读过, 公司封装自己的UI库的时候, 我都过很多UI库的源码, 比如element, iview, vuetifyjs, 等
8.项目中有使用过ElementUI吗?有遇到过哪些问题?它的使用场景主要是哪些?
当然是用过了 很多后台系统,都会是用vue结合上ElementUI来实现,很大程度上提高了开发效率; 遇到的问题:对于修改其默认样式需谨慎。
9.有用过哪些vue的ui?说说它们的优缺点?
个人认为iview比elementUI好看,elementUI在多级联动菜单有一个bug(父子value一样的时候不显示)
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通