ElementUI 面试题整理
ElementUI是怎么做表单验证的?在循环里对每个input验证怎么做呢?
- 普通表单验证
1.表单验证的目的是在防止用户犯错的前提下,尽可能让用户更早地发现并纠正错误。
2.Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可。
3.通过给表单绑定ref属性,在保存方法中配合validate回调函数,即可在表单提交时触发回调函数,继而弹出消息提醒用户
- 动态校验
model/prop/rules,还是以上三个属性,但在 Prop 上有所不同,因校验原理在于,校验规则知道比较哪些值,而动态校验上,值是获取了,但是在动态表单上;校验规则匹配不上哪个需校验对象,从而在首次校验上会出现校验失效的情况。
解决办法是给 prop 加上指定值的规则而不再是原先的固定 name 了,如 :‘数组**.’ + index + '.**value’
你有二次封装过ElementUI组件吗?
输入框在输完内容后进行判断是否为纯空格,如果是纯空格,就要清空输入框,对于el-form组件的表单验证,在rules中的required为true时,纯空格也能检验通过,于是开始对el-input组件进行二次封装 封装分页,上传文件
- 使用 extends 选项对组件进行扩展
雏形
<template>
//这里复制element-ui中el-input的源码,太长了,不好展示
</template>
<script>import { Input } from 'element-ui'export default {extends: Input,created() {this.$on('change', (value)=> {if (Object.prototype.toString.call(value) === '[object String]' && value.trim() === '') {this.$emit('input', '')}})}}
</script>
这样就能对组件各种改改改,template里面的内容是复制过来的,一般不需要改动,如果需要改的话当然也可以这么做。
改进
- 如果不需要template,那就写在“*.js”文件中
import Vue from 'vue';
import ElementUI from 'element-ui';Vue.component('el-input', {extends: ElementUI.Input,created() {this.$on('change', (value)=> {if (Object.prototype.toString.call(value) === '[object String]' && value.trim() === '') {this.$emit('input', '')}})}
})
ElementUI怎么修改组件的默认样式?
- 方法一:/deep/
- 方法二:>>>
- 方法三:在外层添加一层div,设置自定义类名,再修改里边的样式, 格式.自定义类名 .需要修改的样式 {}。
样式穿透/deep/ >>> ::v-deep 三者的区别
1./deep/
在vue3.0之前可使用,例如(复写样式前加/deep/),vue3.0及后使用就会报错
项目中用到了预处理器 scss 、sass、less 操作符 >>> 可能会因为无法编译而报错 。可以使用 /deep/
注意:vue-cli3以上版本不可以
在vue源码vuejs/component-compiler-utils/dists/stylePlugins/scoped.ts 有标注
2.::v-deep 在vue3.0及后使用,替代/deep/
3.>>> 只作用于css,对于less和scss不起作用,如果是less和scss的话需要用到/deep/或::v-deep
4.其他解决方式;
1)将 scoped 移除,或者新建一个没有 scoped 的 style(一个.vue文件允许多个style)
<style type="text/css">.el-radio-button__inner {width: 158px;}
</style>
ElementUI的穿梭组件如果数据量大会变卡怎么解决不卡的问题呢?
- 在 left-footer 的 slot 里面加个翻页组件,
- 并修改 filter-method 方法重绘穿梭机组件,
- 大概保持每页 50 条这样子。
ElementUI表格组件如何实现动态表头?
使用自定义表头,即 中传入自定义 slot。
表头整体结构变化则得自己 v-for 表头配置拼 重绘
ElementUI使用表格组件时有遇到过问题吗?
- 不支持拖拽
- 表格数据量过大导致页面渲染缓慢、卡顿问题
主要原因是,列表生成过程中产生大量的虚拟dom和真实dom,大量占用内存。
解决思路。
1、假滚动事件:拖动滚动滑块,并不会影响左侧的真实滚动,只是记录滚动的位置。
2、根据滚动的位置,计算出对应的数据区间段,比如应该取340-350这10条。
3、根据滚动位置,和数据区间,把这几条数据控制绝对定位,来模拟滚动效果。
有阅读过ElementUI的源码吗?
读过,有时候业务场景需要直接调用它内部方法(ref)
项目中有使用过ElementUI吗?有遇到过哪些问题?它的使用场景主要是哪些?
- 当然是用过了 很多后台系统,都会是用vue结合上ElementUI来实现,很大程度上提高了开发效率;
- 遇到的问题:对于修改其默认样式需谨慎。
有用过哪些vue的ui?说说它们的优缺点?
首推 ElementUI
1、支持 vue,angluar,react
2、除了缺少树形表格,真找不出什么缺点。确实特别优秀。以至于基于他写的后台管理系统在github上start 甚至高于 ant design 本身。
3、组件封装都十分简单,很容易修改,上手和学习都特别方便。没有任何障碍。
Ant design Vue
【KPI之王】阿里的作品,阿里在江湖上一直是赫赫威名,
1、支持 vue,angluar,react
2、vue版本的表格列宽不能拖拽,必须设置宽度,不然错位。锁定列时候,内容太多,表头容易留白,多页签的模式下缓存存在…简单来说,不能算是坑,
只能说他们设定的规则太多。需要大量的时间来看文档来适应。
3、页面的设计规则,ant design 的大量ui设计基本都是基于透明度来做的,而不是基于颜色本身来调整。很容易给人一种色弱的感觉。需要比较吃力的去看清楚 页面本身的内容。比如我们经常会 #000 #ddd来标示文字的重要程度,基本 ant design的做法就是#000 0.65 来实现了.
IVIEW
其实比较不想将其放入比较的内容,
组件封装的过于严密,有收费教程
提问作者说table的一些render事情,不予置评。
三个都用过,目前尝试ant design 不过,从使用难易,上手程度上看,个人首推 elementUI
最近更新,目前被ant design 坑的不行,各种兼容问题。引入driver.js 的部分样式不显示
ElementUI 面试题整理相关推荐
- 计算机组成算术流水线,计算机组成系统结构试题整理.doc
计算机组成系统结构试题整理 选择题(50分,每题2分,正确答案可能不只一个,可单选或复选) (CPU周期.机器周期)是内存读取一条指令字的最短时间. (多线程.多核)技术体现了计算机并行处理中的空间并 ...
- 2010 .NET面试题整理之基础篇
2010 .NET面试题整理之基础篇 zhuan 开篇语:对于已有工作经验的朋友,也许面试题已显得不怎么重要,但是如果你应聘的还仅仅是个普通的程序员,相信在很多的公司都还是会先拿出一套面试题,可能对整 ...
- android笔试题整理
笔试题整理 今天接到消息,说下个星期三.会陆陆续续的有公司来学校找暑假实习生.还没准备好啊,这就来啦?麻蛋 我慌的要死啊~ 1.Math.round(11.5)等于多少(). Math.round(- ...
- Java经典面试题整理及答案详解(八)
简介: Java经典面试题第八节来啦!本节面试题包含了进程.线程.Object类.虚拟内存等相关内容,希望大家多多练习,早日拿下心仪offer- 了解更多: Java经典面试题整理及答案详解(一) J ...
- Java经典面试题整理及答案详解(三)
简介: 以下是某同学面试时,面试官问到的问题,关于面试题答案可以参考以下内容- 上一篇:Java经典面试题整理及答案详解(二) Java面试真题第三弹接住!相信通过前两节的学习,大家对于Java多少有 ...
- 【资料整理】一些英语面试题整理
[求职英语]一些英语面试题整理 SkySeraph Nov 3th 2011 HQU Email:zgzhaobo@gmail.com QQ:452728574 Latest Modified ...
- 史上最全 BAT 大厂面试题整理
转载自 史上最全 BAT 大厂面试题整理!(速度收藏) 主要分为以下几部分: (1)java面试题 (2)Android面试题 (3)高端技术面试题 (4)非技术性问题&HR问题汇总 1 ja ...
- 常见的面试题整理 -python
常见的面试题整理 在这里插入代码片 #二分查找def binarySearch(alist, item):first=0;last=len(alist)-1;while first <= las ...
- [转载] Spring面试题整理
参考链接: Java中的动态方法Dispatch和运行时多态 Spring面试题整理 2018年03月07日 21:11:46 hrbeuwhw 阅读数:49116 Spring 概述 1. 什么是s ...
- Spring Boot 面试题整理
Spring Boot 面试题整理 2018年08月12日 22:32:35 Time_sg 阅读数 19380 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文 ...
最新文章
- 8.1shell介绍 8.2命令历史 8.3命令补全和别名 8.4通配符 8.5输入输出重定向
- 通过xml 生成html页面,使用xmldom在服务器端生成静态html页面
- CSS3实现带阴影的弹球
- 怎样在 Markdown 中使程序代码带上行号
- 这届年轻人连穷都不怕,还会怕冷?
- 我去,剑桥硕士重委员会可还行~我颤抖地拿起了ethz的课程描述
- 你的专业 VS 你妈口中你的专业
- linux while read文件,linux shell脚本用while read逐行读取文本的问题
- [深度学习-实践]BP神经网络的Helloworld(手写体识别和Fashion_mnist)
- 动手学servlet(六) 过滤器和监听器
- 一台mysql数据库服务器_在一台服务器安装多个MySQL数据库
- 倒立摆的实现 1.前期准备
- 测试总结报告写法简单总结
- 南京大学计算机化学会,南京大学理论与计算化学研究所
- 以太坊:过去、现在、未来
- SumToken钱包怎么样_SUMTOKEN钱包靠谱吗
- Zookeeper源码之集群选举
- IDEA 打包 spark 程序 并在远程 hadoop HA 上运行测试
- 对接IronSource广告(视频)
- === 和 == 的区别
热门文章
- 华为模拟器eNSP防火墙配置vlan实验
- 小明左手拿着纸牌黑桃10,右手拿着纸牌红桃8, 	现在交换手中的牌, 	用程序模拟实现的过程, 	并输出交换前后手中的纸牌的结果
- 计算机一级用写在简历里面吗,写简历要小心,简历填写最忌讳的是什么,你知道吗?...
- 网络游戏外挂编写初级教程
- Nginx之读写分离
- bios设置raid启动模式Linux,[BIOS设置]BIOS中RAID模式怎么设置?
- 毕业实用统计模型(一)——时间序列
- 一文理解全文搜索引擎(Lucene、Elasticsearch、Solr)、目录搜索引擎、元搜索引擎的异同
- [SPOJ] COT2 树上莫队
- MPS2326 Constant-On-Time (COT) Step-Down Converter DC-DC