2023面试高手

这个屌丝很懒，什么也没留下！

热门标签

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

作者：2023面试高手 | 2024-05-07 00:13:59

踩

elementui表单的bug

一、element-ui dialog设置为点击弹窗以外的区域不关闭弹窗

第一种:
在el-dialog标签中添加:close-on-click-modal="false"即可


<el-dialog title="标题" :close-on-click-modal="false"  :visible.sync="dialogEnrol" width="30%">
  弹窗内容
</el-dialog>

第二种:全局设置


在mian.js里面：
import ElementUI from 'element-ui';
// 修改 el-dialog 默认点击遮照为不关闭
ElementUI.Dialog.props.closeOnClickModal.default = false

二、.select 里面的option 的宽度跟最外的下拉框宽度不一致解决办法，在select标签里面加style：100%

三、全局设置 size ，button、input 等我不想要那么大的size就可以全局设置一个尺寸：

全局配置

在引入 Element 时，可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）。按照引入 Element 的方式，具体操作如下：

1.完整引入 Element：在main.js 里面


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修饰符就可以了。

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


使用header-cell-style可以修改它 的背景及其他
 
<!--内容表格-->
    <el-table
        :data="tableData"
        border
        :header-cell-style="{background:'#000', color:'#fff'}"
        style="width: 95%;margin: 40px;">

效果如下：

在这里插入图片描述

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

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


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

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


<el-table-column label="ciName" prop="ciName" width="180" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span v-if="scope.row.errorMsg" style="color: red">{
    {scope.row.ciName}}</span>
                        <span v-else>{
    {scope.row.ciName}}</span>
                    </template>   
                </el-table-column>

效果如下：

注：表格数据在渲染的时候，建议使用深拷贝的方法，赋值一下。否则会出现，表格数据更新延迟。 深拷贝方法： 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>

在你要隐藏的部分加上 v--show=“advanced"


<el-row :gutter="24" v-show="advanced">
要隐藏的内容。。。
</el-row>

js 定义变量： advanced: false, //展开/收起

方法：


    // 展开/收起
    toggleAdvanced(){
      this.advanced = !this.advanced;
    },

十、elment-ui 表格数，默认是第一列展开的，我想从第二列开始，

解决办法：只需要：你把第一列的el-table-column的type设置为type=“”，下拉就到第二列去了

十一、element-ui el-radio-group for循环时取值，老是label的值？？？

错误写法：


                <el-radio-group v-model="formData.type" @change="onChangeType">
                    <el-radio v-for="(item, index) in menuTypeList" :value="item.value" :label="item.label" :key="index">
                        {
   { item.label}}
                    </el-radio>
                </el-radio-group>

正确写法：把：:label="item.value" 就可以了


                <el-radio-group v-model="formData.type" @change="onChangeType">
                    <el-radio v-for="(item, index) in menuTypeList" :value="item.value" :label="item.value" :key="index">
                        {
   { item.label}}
                    </el-radio>
                </el-radio-group>
 
 
        //改变类型

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/546510