elment ui 组件bug总结_elementui表单的bug

import Vue from ‘vue’;
import Element from ‘element-ui’;
Vue.use(Element, { size: ‘small’, zIndex: 3000 });

2.或者用按需引入：


按需引入 Element：

import Vue from ‘vue’;
import { Button } from ‘element-ui’;

Vue.prototype.$ELEMENT = { size: ‘small’, zIndex: 3000 };
Vue.use(Button);

 按照以上设置，项目中所有拥有 `size` 属性的组件的默认尺寸均为 'small'，弹框的初始 z-index 为 3000。

//在index.js文件中 设置size
Vue.use(Element, { size: ‘small’});

## 四、element-ui表单验证时需要number类型


### 解决方式


在v-model的时候加个number修饰符就可以了。


![](https://img-blog.csdnimg.cn/20210526165222732.png)



## 五、element设置表格el-table表头的颜色

使用header-cell-style可以修改它 的背景及其他

<el-table
    :data="tableData"
    border
    :header-cell-style="{background:'#000', color:'#fff'}"
    style="width: 95%;margin: 40px;">

**效果如下：**


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210129214345265.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3V0b3Vp,size_16,color_FFFFFF,t_70)


## 六、element-ui 表格的某一列的字段字体变颜色2种方法


方法①：  :cell-style="cellStyle"

    //修改单元格样式的方法
    cellStyle(row, column, rowIndex, columnIndex){
        if (row.row.errorMsg == "已存在相同记录"){
            if (row.columnIndex === 3){
                return 'color: red'
            }
        }
    },

方法② 用卡槽的方法去解决

{ {scope.row.ciName}} { {scope.row.ciName}} ```

效果如下：

注： 表格数据在渲染的时候， 建议使用深拷贝的方法，赋值一下。否则会出现，表格数据更新延迟。 深拷贝方法： this.excelData = JSON.parse(JSON.stringify(this.excelData));

七、vue项目控制台报警告：

sockjs.js?9be2:2999 WebSocket connection to ‘ws://localhost:8083/sockjs-node/264/g0wa1uvw/websocket’ failed: WebSocket is closed before the connection is established

解决办法：webpack热部署导致的问题
注释掉
node_modules\sockjs-client\dist\sockjs.js
里面
1604行这个就可以了

八、element中table单元格添加tooltip  并且根据后台返回的数据判断，tooltip是否显示

废话不多说，直接贴代码：

 <el-table-column label="ciName" prop="ciName" width="180">
                    <template slot-scope="scope">
                        <el-tooltip placement="top" effect="light" v-if="scope.row.errorMsg">
                            <div style="color:red">{
    {scope.row.ciName }}</div>
                            <div slot="content" style="color:red">{
    {scope.row.errorMsg}}</div>
                        </el-tooltip>
                        <div v-else>{
    {scope.row.ciName }}</div>
                    </template>   
                </el-table-column>

分析： 这种一般肯定用的卡槽的方法显示数据，slot-sope

可以把条件写在  el-tooltip  标签里面 v-if  
然后还要一个 v-else  不需要   el-tooltip  的，只显示数据的。

九、elment-ui  搜索条件太多，可以做一个收起/展开的功能，比较好

先上效果图：

展开：

收起：

代码如下：

          <a style="margin-left:10px" @click="toggleAdvanced">
            {
   { advanced ? '收起' : '展开'}}
            <i :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down' "></i>
          </a>

css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解

js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

l
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

[外链图片转存中…(img-g1qnc1sm-1714142380385)]

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】