ElementUI 面试题整理

最新推荐文章于 2024-04-28 01:02:38 发布

IT界中的一枝梅

最新推荐文章于 2024-04-28 01:02:38 发布

阅读量3.8k

点赞数 3

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/u011074688/article/details/125744195

版权

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 的部分样式不显示