【面试】2023ElementUI面试题&答案汇总

软泡芙

已于 2023-01-28 15:38:50 修改

阅读量6.4k

点赞数 4

分类专栏： InterView 开发文章标签： elementui vue.js javascript

于 2023-01-28 15:20:05 首次发布

本文链接：https://blog.csdn.net/weixin_44231544/article/details/128017888

版权

开发同时被 2 个专栏收录

142 篇文章

订阅专栏

InterView

8 篇文章

订阅专栏

ElementUI介绍

ElementUI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。
官网地址：http://element-cn.eleme.io/#/zh-CN
XX健康项目后台系统就是使用ElementUI来构建页面，在页面上引入 js 和 css 文件即可开始使用，如下：

 <!‐‐ 引入ElementUI样式 ‐‐>
<link rel="stylesheet" href="https://unpkg.com/element‐ui/lib/themechalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!‐‐ 引入ElementUI组件库 ‐‐>
<script src="https://unpkg.com/element‐ui/lib/index.js"></script>

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

model 绑定表单数据,通过prop取表单数值,通过编写ref进行后台API验证 ,根据rules进行表单内容验证

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

popover + button 的组件，点击该按钮后还有个二次确认或选择的交互。
InfiniteScroll 封装个简单的带触底加载的列表

<template>
  <el-input
    placeholder="价格"
    v-model="current"
    :disabled="disabled"
    :maxlength="8"
    @change="change"
  ></el-input>
</template>
<script>
export default {
  props: {
    value: Number,
    disabled: Boolean
  },
  data() {
    return {
      current: ""
    };
  },
  watch: {
    value(val) {
      if (val > 0) {
        this.current = (val / 100).toFixed(2);
      } else {
        this.current = "";
      }
    }
  },
  created() {
    if (this.value > 0) {
      this.current = (this.value / 100).toFixed(2);
    } else {
      this.current = "";
    }
  },
  methods: {
    change() {
      let value = this.current * 100 || 0;
      this.current = (value / 100).toFixed(2);
      this.$emit("input", value.toFixed(0) * 1);
    }
  }
};
</script>

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

<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使用表格组件时有遇到过问题吗？

@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))

对于修改其默认样式需谨慎。

有阅读过ElementUI的源码吗？

读过, 公司封装自己的UI库的时候, 我都过很多UI库的源码, 比如element, iview, vuetifyjs, 等

有用过哪些vue的ui？说说它们的优缺点？

个人认为iview比elementUI好看，elementUI在多级联动菜单有一个bug（父子value一样的时候不显示）

常用组件

1 Container 布局容器
用于布局的容器组件，方便快速搭建页面的基本结构：
<el‐container>：外层容器。当子元素中包含 <el‐header> 或 <el‐footer> 时，全部子元素会垂直上下排列，否则会水平左右排列
<el‐header>：顶栏容器
<el‐aside>：侧边栏容器
<el‐main>：主要区域容器
<el‐footer>：底栏容器

<body>
<div id="app">
    <el-container>
        <el-header>Header</el-header>
        <el-container>
            <el-aside width="200px">Aside</el-aside>
            <el-container>
                <el-main>Main</el-main>
                <el-footer>Footer</el-footer>
            </el-container>
        </el-container>
    </el-container>
</div>
<style>
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: left;
        line-height: 60px;
    }
 
    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }
 
    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 590px;
    }
</style>
</body>
<script>
    new Vue({
        el: '#app'
    });
</script>

2 Dropdown 下拉菜单
将动作或菜单折叠到下拉菜单中。

 <el-dropdown split-button size="small" trigger="click">
       个人中心
       <el-dropdown-menu>
           <el-dropdown-item>退出系统</el-dropdown-item>
           <el-dropdown-item divided>修改密码</el-dropdown-item>
           <el-dropdown-item divided>联系管理员</el-dropdown-item>
       </el-dropdown-menu> </el-dropdown>

<el-dropdown split-butto>:下拉按钮
<el-dropdown-menu>下拉菜单
<el-dropdown-item>下拉项
divided分隔

3 NavMenu 导航菜单
为网站提供导航功能的菜单。

<el-menu>
    <el-submenu index="1">
        <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">导航一</span>
        </template>
        <el-menu-item>选项1</el-menu-item>
        <el-menu-item>选项2</el-menu-item>
        <el-menu-item>选项3</el-menu-item>
    </el-submenu>
    <el-submenu index="2">
        <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
        </template>
        <el-menu-item>选项1</el-menu-item>
        <el-menu-item>选项2</el-menu-item>
        <el-menu-item>选项3</el-menu-item>
    </el-submenu>
</el-menu>

<el-menu>:导航菜单
<el-submenu index="1">:导航按钮
<template slot="title">标题和名称
<i class="el-icon-menu">图标
<span slot="title">导航二</span>:导航标题
<el-menu-item>导航项

4 Table 表格
用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

<el-table :data="tableData" stripe>
    <el-table-column prop="date" label="日期"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column label="操作" align="center">
        <!--
        slot-scope：作用域插槽，可以获取表格数据
        scope：代表表格数据，可以通过scope.row来获取表格当前行数据，scope不是
        固定写法
        -->
        <template slot-scope="scope">
            <el-button type="primary" size="mini"
                       @click="handleUpdate(scope.row)">编辑
            </el-button>
            <el-button type="danger" size="mini"
                       @click="handleDelete(scope.row)">删除
            </el-button>
        </template>
    </el-table-column>
</el-table>
<script>
    new Vue({
        el: '#app',
        data: {
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }]
        },
        methods: {
            handleUpdate(row) {
                alert(row.date);
            },
            handleDelete(row) {
                alert(row.date);
            }
        }
    });
</script>

<el-table :data="tableData" stripe>:表格\数据绑定对象\样式

<el-table-column prop="date" label="日期">:表格行\数据绑定对象属性\表头

align="center":居中
slot-scope：作用域插槽，可以获取表格数据

scope：代表表格数据，可以通过scope.row来获取表格当前行数据，scope不是固定写法

<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">按钮\类型\大小\事件绑定

5 Pagination 分页

当数据量过多时，使用分页分解数据。

<!--
current-change：内置的事件，当前页码改变时会触发，可以获取到改变之后的页码
-->
<el-pagination
        @current-change="handleCurrentChange"
        current-page="5"
        page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="305">
</el-pagination>
<script>
    new Vue({
        el: '#app',
        methods: {
            handleCurrentChange(page) {
                alert(page);
            }
        }
    });
</script>

分页
@current-change="handleCurrentChange"内置的事件，当前页码改变时会触发，可以获取到改变之后的页码
current-page="5"当前页码
page-size="10"显示页码总数
layout="total, prev, pager, next, jumper"需要显示的分页组件
:total="305"总数据条数

6 Message 消息提示
常用于主动操作后的反馈提示。

<el-button :plain="true" @click="open1">消息</el-button>
<el-button :plain="true" @click="open2">成功</el-button>
<el-button :plain="true" @click="open3">警告</el-button>
<el-button :plain="true" @click="open4">错误</el-button>
<script>
    new Vue({
        el: '#app',
        methods: {
            open1() {
                this.$message('这是一条消息提示');
            },
            open2() {
                this.$message({
                    message: '恭喜你，这是一条成功消息',
                    type: 'success'
                });
            },
            open3() {
                this.$message({
                    message: '警告哦，这是一条警告消息',
                    type: 'warning'
                });
            },
            open4() {
                this.$message.error('错了哦，这是一条错误消息');
            }
        }
    })
</script>

this. $m ess a g e 触发钩子 m ess a g e 提示内容 t y p e :^{'} s u cces s^{'} 提示类型 t hi s .$ message.error(“”)异常警告和内容

7 Tabs 标签页
分隔内容上有关联但属于不同类别的数据集合。

<h3>基础的、简洁的标签页</h3>
<!--
通过value属性来指定当前选中的标签页
-->
<el-tabs value="first">
    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
</el-tabs>
<h3>选项卡样式的标签页</h3>
<el-tabs value="first" type="card">
    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
</el-tabs>
<h3>卡片化的标签页</h3>
<el-tabs value="first" type="border-card">
    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
</el-tabs>
<script>
    new Vue({
        el: '#app'
    })
</script>

<el-tabs value="first">选项卡\默认选择项
<el-tab-pane label="用户管理" name="first">选项\显示名\标识name

8 Form 表单
由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。

<div id="app">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="活动名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" prop="region">
            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="活动时间" required>
            <el-col :span="11">
                <el-form-item prop="date1">
                    <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1"
                                    style="width: 100%;"></el-date-picker>
                </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
                <el-form-item prop="date2">
                    <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
                </el-form-item>
            </el-col>
        </el-form-item>
        <el-form-item label="即时配送" prop="delivery">
            <el-switch v-model="ruleForm.delivery"></el-switch>
        </el-form-item>
        <el-form-item label="活动性质" prop="type">
            <el-checkbox-group v-model="ruleForm.type">
                <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                <el-checkbox label="地推活动" name="type"></el-checkbox>
                <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="特殊资源" prop="resource">
            <el-radio-group v-model="ruleForm.resource">
                <el-radio label="线上品牌商赞助"></el-radio>
                <el-radio label="线下场地免费"></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式" prop="desc">
            <el-input type="textarea" v-model="ruleForm.desc"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
    </el-form>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            ruleForm: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            rules: {
                name: [
                    {required: true, message: '请输入活动名称', trigger: 'blur'},
                    {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                ],
                region: [
                    {required: true, message: '请选择活动区域', trigger: 'change'}
                ],
                date1: [
                    {type: 'date', required: true, message: '请选择日期', trigger: 'change'}
                ],
                date2: [
                    {type: 'date', required: true, message: '请选择时间', trigger: 'change'}
                ],
                type: [
                    {type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change'}
                ],
                resource: [
                    {required: true, message: '请选择活动资源', trigger: 'change'}
                ],
                desc: [
                    {required: true, message: '请填写活动形式', trigger: 'blur'}
                ]
            }
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                   alert(valid)
            });
 
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    })
</script>

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" >:表单/绑定数据模板/绑定校验
<el-form-item label="活动名称" prop="name">表单项\显示内容\数据模板属性绑定
<el-input v-model="ruleForm.name">表单输入框/数据绑定
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">:下拉框/数据绑定/提示
<el-option label="区域一" value="shanghai"></el-option>:下拉项/数据项
ref绑定校验信息
prop对应rules中对应的校验规则字段名

说一下element ui遇到过的坑

1.表单设置触发事件为blur，但是ctrl+A全选以后再删除时又触发了change事件，并提示一个原始报错

解决方案：trigger设置成
trigger: [‘blur’, ‘change’]

2.使用el-dialog 遮罩层把显示内容遮住了

原因： Dialog 的外层布局的 position 值为 fixed, absolute, relative 三者之一时，就会出现被蒙板遮住的情况。
解决方法：
v-bind:modal-append-to-body=“false”

3.使用el-select 不能继承父元素的宽度

原因：el-select 本身是 inline-block
解决办法：手动设置el-select的宽度

怎么修改element ui动态组件的样式

要修改elementUI组件的样式，可以采用以下两种方式

1.全局样式

通过选择权重覆盖elementUI组件的样式，如修改复选框为圆角：

   <style> 
        .edit-item .el-checkbox__inner { 
        　　border-radius: 50%; 
        } 
    </style>

但这种方式为全局样式，会影响页面中所有复选框，如果不希望影响其它页面的样式，可以采用第二中方式

2.局部样式

<style scoped> 
    .edit-item .el-checkbox__inner { 
    　　border-radius: 50%; 
    } 
</style>

但如果仅仅是设置了scoped属性，样式无法生效，原因是以上样式会被编译成属性选择器，而elementUI组件内部的结构却无法添加该html属性，以上样式被编译成如下代码：

.edit-item[data-v-6558bc58] .el-checkbox__inner[data-v-6558bc58] { 
    　　border-radius: 50%; 
    }

解决方案也很简单，只需在选择器中要添加

>>>即可

如果是sass或less编写的样式，还可以使用

/deep/

 <style scoped lang="scss"> 
        .edit-item /deep/ .el-checkbox__inner { 
        　　border-radius: 50%; 
        } 
    </style>

以上写法样式都会编译成以下样式：

.edit-item[data-v-6558bc58] .el-checkbox__inner{}

所以elementUI中的样式就能成功覆盖。

element-ui要改变默认样式有几种方法

当我们在vue中引入第三方组件库的时候，vue组件中样式的scoped就会成为我们修改样式的阻碍，有以下三种方法修改样式，并且不影响全局样式.

在样式外新增一个样式标签不添加scoped

<style> 
    .my{ 
        margin: 20px; 
    } 
    .my .el-input__inner{ 
        border-radius: 15px;/* 这个样式起效果 */ 
    } 
</style> 


<style scoped> 
    .my .el-input__inner{ 
        border-radius: 30px; /* 这个样式不起效果 */ 
    } 
</style>

使用deep样式穿透

<style scoped> 
    .my .el-input__inner{ 
        border-radius: 30px;/* 这个不起作用 */ 
    } 
    .my /deep/ .el-input__inner{ 
        border-radius: 30px;/* 这个起作用 */ 
    } 
</style>

使用>>>穿透

<style scoped> 
    .my .el-input__inner{ 
        border-radius: 30px;/* 这个不起作用 */ 
    } 
    .my >>> .el-input__inner{ 
        border-radius: 30px;/* 这些起作用 */ 
        border: 1px solid #eceef2; 
        outline: 0; 
    } 
</style>

element-UI的table组件有哪些属性，为什么table组件要用key？

1.table表格组件的属性有:

data , 显示的数据
size , 表格的尺寸, 可选的值有medium / small / mini
height , Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px.
empty-text , 空数据时显示的文本内容
stripe , 是否为斑马纹 table , boolean类型.
border , 是否带有纵向边框 , boolean类型.
row-key , 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的.
…
2.为什么table组件要用key？

row-key属性用来优化 Table 的渲染, 如果不添加row-key，当重新请求渲染表格数据，会默认触发@current-change等等方法，因为重新渲染列表，current-change发生了改变，原本选择的row，变成不再选择任何一行，导致问题很难排查.

参考官网: table组件

好了，关于element-UI的面试题就先分享这些了，后续有新的面试题，也会持续更新上来的。欢迎持续关注哟，天天干货不断！