Element UI 踩坑指南

LGEC

已于 2023-09-13 15:02:30 修改

阅读量1.2k

点赞数 3

分类专栏：疑难杂症文章标签：前端 vue vue.js elementui

于 2022-04-28 15:56:46 首次发布

本文链接：https://blog.youkuaiyun.com/LGEC_/article/details/124475789

版权

疑难杂症专栏收录该内容

10 篇文章

订阅专栏

本文档汇总了使用ElementUI时遇到的一些典型问题及其解决方案，包括图片预览遮罩显示异常、输入框无法输入、表格空数据时的自定义展示、表格滚动条样式调整、表格条件渲染错误、滚动条时表格内容不全以及表单验证自动触发等，并提供了相应的修复代码和优化建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写目录标题

一、ElementUI 弹框内图片预览遮罩显示到了最外层

只需要在图片预览弹框组件上添加:append-to-body="true"就行

	<el-upload
	   ref="licenceUpload"
	   action="xxx"
	   :limit="6"
	   multiple
	   list-type="picture-card"
	   :http-request="uploadImg"
	   :before-upload="beforeAvatarUpload"
	   :before-remove="beforeRemove"
	   :on-preview="handlePictureCardPreview"
	   :file-list="showList">
	   <i class="el-icon-plus"></i>
	 </el-upload>
	 <el-dialog :append-to-body="true" :visible.sync="dialogVisible">
	   <img width="100%" :src="dialogImageUrl" alt="">
	 </el-dialog>

二、Element UI input输入框无法输入

遇到一个问题，进行数据更改操作时，弹框内数据可以正常渲染，但是无法输入。原因是这个输入框绑定的值嵌套比较深，数据回显时赋值写的有问题。

  data() {
    return {
    	form:{
    		a:undefined,
    		b:[{c1:undefined,c2:undefined}]
    	}
    }
  },
  methods: {
  	// 数据回显事件
    handleUpdate(){
      // 可能会出问题的赋值（普通层级类似a这种不会出问题，但是b里面的c1、c2会出问题，输入框无法输入）
      this.form.a = 123;
      this.form.b = [{c1:1,c2:2}]
    },
   }

	<form>
		<el-form-item prop="a" >
          <el-input v-model="form.a" type="number"></el-input>
        </el-form-item>
		<template v-for="(item,index) in form.b" :key="index">
			<el-form-item :prop="'b.' + index + '.c1'" :rules="{required: true, message: 'c1不能为空', trigger: 'blur'}">
	          <el-input v-model="item.c1" type="number"></el-input>
	        </el-form-item>
			<el-form-item :prop="'b.' + index + '.c2'" :rules="{required: true, message: 'c2不能为空', trigger: 'blur'}">
	          <el-input v-model="item.c2" type="number"></el-input>
	        </el-form-item>
		</template>
	</form>

上述错误赋值会因为组件嵌套太深，导致无法组件无法刷新，正常写法如下：

  //方法一
  let formData = {a:123,b:[{c1:1,c2:2}]};
  this.form = formData;
  //方法二
  this.form.a = 123;
  this.$set(this.form,'b',[{c1:1,c2:2}]);

三、Element UI 表格数据为空时显示图片

Element UI 表格没有数据时会默认展示“数据为空”的文字，文字可以替换，用图片替换他会更好看

  	<el-table>
      <el-table-column>
      </el-table-column>
      <div slot="empty" class="empty">
        <img :src="emptyImg"/>
        <!-- <span>更改的文字</span> -->
      </div>
    </el-table>

四、Element UI 表格数据为空时显示图片有滚动条时图片居中问题

Element UI 表格没有数据时的默认展示会居中显示，但是假如表头很长时，我们看到的效果就是没有居中，图片会跟随滚动条移动
解决方案：数据为空时，表格主体宽度设为100%，而让表头滚动起来

  	.el-table{
		/* 表格滚动条样式优化 */
		.el-table__body-wrapper::-webkit-scrollbar-track-piece,.el-table__header-wrapper::-webkit-scrollbar-track-piece {
			background: #d3dce6;
		}
	
		.el-table__body-wrapper::-webkit-scrollbar,.el-table__header-wrapper::-webkit-scrollbar {
			height: 6px;
			width: 6px;
		}
	
		.el-table__body-wrapper::-webkit-scrollbar-thumb,.el-table__header-wrapper::-webkit-scrollbar-thumb {
			background: #99a9bf;
			border-radius: 20px;
		}
		/* 表格数据为空默认图片样式 */
		.el-table__header-wrapper{
			overflow-x: auto;
		}
		.el-table__empty-block {
			width: 100%;
			min-width: 100%;
			max-width: 100%;
			.el-table__empty-text{
				.empty{
					display: flex;
					img{
						display: block;
						margin: auto;
					}
				}
			}
		}
	}
	/* 表格数据不为空时移除表头滚动 */
	.el-table--enable-row-transition{
		.el-table__header-wrapper{
			overflow-x: hidden;
		}
	}
	.el-table::before{
		display: none;
	}

五、Element UI 中的 table 组件条件区块不显示

错误代码如下,条件不生效的原因是slot-scope只能有一个

  	<el-table>
      <el-table-column
        v-for="(item, index) in list"
        :key="item.id"
        align="center"
        min-width="100"
      >
        <template v-if="item.hasVal!=1" slot="header">
          <span
            >{{ item.name}}<br />{{
              item.name2 ? "(" + item.name2 + ")" : ""
            }}</span
          >
        </template>
        <template v-else slot="header">
          <span>{{ item.name}}</span>
        </template>
        <template v-else-if="item.hasVal!=1 && scope.row.createTime == '最大值'" slot-scope="scope" >
          <span v-if="scope.row.reportList[index].maxValue !== undefined" >
            {{ scope.row.reportList[index].maxValue }}
          </span>
          <span v-else>- -</span>
        </template>
        <template  v-else-if="item.hasVal!=1" slot-scope="scope" >
          <span v-if="scope.row.reportList[index].maxValue !== undefined" >
            {{ scope.row.reportList[index].maxValue }}
          </span>
          <span v-else>- -</span>
          <br>
          <span v-if="scope.row.reportList[index].minValue !== undefined" >
            {{ scope.row.reportList[index].minValue }}
          </span>
          <span v-else>- -</span>
          <br>
          <span v-if="scope.row.reportList[index].avgValue !== undefined" >
            {{ scope.row.reportList[index].avgValue }}
          </span>
          <span v-else>- -</span>
        </template>
    </el-table>

正确代码如下，可以将条件区块放到一个slot-scope中，用template隔开

  	<el-table>
      <el-table-column
        v-for="(item, index) in list"
        :key="item.id"
        align="center"
        min-width="100"
      >
        <template v-if="item.hasVal!=1" slot="header">
          <span
            >{{ item.name}}<br />{{
              item.name2 ? "(" + item.name2 + ")" : ""
            }}</span
          >
        </template>
        <template v-else slot="header">
          <span>{{ item.name}}</span>
        </template>
        <template v-if="item.hasVal!=1" slot-scope="scope" >
          <template v-if="scope.row.createTime == '最大值'">
            <span v-if="scope.row.reportList[index].maxValue !== undefined" >
              {{ scope.row.reportList[index].maxValue }}
            </span>
            <span v-else>- -</span>
          </template>
          <template v-else>
            <span v-if="scope.row.reportList[index].maxValue !== undefined" >
              {{ scope.row.reportList[index].maxValue }}
            </span>
            <span v-else>- -</span>
            <br>
            <span v-if="scope.row.reportList[index].minValue !== undefined" >
              {{ scope.row.reportList[index].minValue }}
            </span>
            <span v-else>- -</span>
            <br>
            <span v-if="scope.row.reportList[index].avgValue !== undefined" >
              {{ scope.row.reportList[index].avgValue }}
            </span>
            <span v-else>- -</span>
          </template>
        </template>
    </el-table>

六、Element UI 中的 table 有滚动条时el-table__body-wrapper没有铺满

table设定height时，内容超出显示时会显示滚动条。但是当一开始表格没有数据时，更改查询条件获取到数据后，有滚动条时el-table__body-wrapper没有铺满。解决方案如下：

  	this.$nextTick(()=>{
       this.$refs.mainTable.doLayout()
   })

在查询数据后执行上述操作，让table重新加载。（其中table是绑定在表格上的ref）

七、Element UI 表单切换自动开启所有校验

表单校验有一个validate-on-rule-change属性，默认是true，改为false就可以了！

  	<el-form v-if="activeStep==1" ref="form1" :model="form1" :rules="rules1" label-width="120px" :validate-on-rule-change="false">