【element ui】问题集锦

Beam007

已于 2023-11-07 10:43:39 修改

阅读量2.1k

点赞数 1

分类专栏： element 文章标签： vue.js 前端 javascript

于 2022-03-29 16:57:16 首次发布

本文链接：https://blog.csdn.net/Beam007/article/details/123825985

版权

本文汇总了在使用 Element UI 过程中遇到的各种问题，包括菜单路由跳转、子菜单展开配置、样式修改、表格边框显示、select 标签失效、表单验证、火狐下 echarts 显示问题、树形组件展开问题、表格宽度拖动、浮动清除、$confirm 闪退、$message 报错、冒号绑定值、操作栏错位以及 date-picker 类型切换和格式化等问题，并提供了详细的解决方案。

摘要由CSDN通过智能技术生成

前言

将以往文章的element ui问题汇总至此

一、菜单路由跳转

要实现路由跳转，先要在el-menu标签上添加router属性。
然后只要在每个el-menu-item标签内的index属性设置一下url即可实现点击el-menu-item实现路由跳转。
当然也可以在每个el-menu-item标签内的router属性设置一下url即可实现点击跳转切优先级较index高。

二、是否只保持一个子菜单的展开配置时报错

配置：<el-menu unique-opened = true>
报错：Invalid prop: type check failed for prop "uniqueOpened". Expected Boolean, got String.
改为：<el-menu :unique-opened = true> 或 <el-menu :unique-opened = "true">

三、修改element-ui样式

因为官方文档并不详细，像官方文档没有说el-aside的宽度怎么设置。

然后我发现，给el-aside的class里设置宽度不行，貌似会被元素样式覆盖掉，非得设置style=“width:210px”。

问题来了：我点击某个按钮，通过jequery或者全局变量控制修改el-aside的宽度。同时当我页面上有定时器不断刷新存在时，修改的宽度会恢复成style=“width:210px”。

目前解决的办法只有一个，修改element-ui元素样式，再通过jq修改元素el-aside的宽度时，无论定时器setTimeout怎么刷新也不会影响当前样式修改。

此处注意：

1、修改样式时通过全局变量控制，会明显出现卡顿现象，最后还是选择通过jequery的.css或者.animate方法。
2、setTimeout比setInterval对内存影响更友好。
3、正经说说怎么通过正规渠道修改element-ui样式：官网API文档没有那就只能看源码。
比如修改el-aside的宽度，找到文件\node_modules\element-ui\packages\aside\index啥也没有，引入了Aside from ‘./src/main’;

继续查看文件./src/main

<aside class="el-aside" :style="{ width }">
  <slot></slot>
</aside>

以上可以看出el-aside可以设置修改宽度通过

props: {
  width: {
    type: String,
    default: '300px'
  }
}

属性width默认300px，由此可以按照源码样式修改，注意当前值的类型是String，所以设置如下：
<el-aside :width="'210px'">
210px一定要用单引号’'括起来转换成String类型。

四、border-image导致el-table表头的边框时有时无

现象：el-table__header左右边框有时候不显示
区别：表头的高宽不一样
改：border-image: linear-gradient(150deg, #1ddae4 , #2698ec) 30 30;
为：border-image: linear-gradient(150deg, #1ddae4 , #2698ec) 5;
就可以了……

原因：

border-image: linear-gradient()后面的四个参数分别表示top right bottom left

有一些高宽限制肯定不能超过外层div的高宽，然而具体的限制，参考如下博文，我试了下还是不对，暂时找不到其他资料。

https://www.cnblogs.com/zhangdongya/p/8677630.html

包括这四个参数设置 30 30px 1/30px的差别为什么中间那个不可以，另外两个分别显示的什么还是不清楚。哎。

五、element标签el-select失效

element标签使用时候千万注意string和number类型的对应一致，不然一直不生效，比如：

<el-select v-model="validTime" clearable placeholder="请选择">
    <el-option v-for="item in validTimeData" :key="item.value" :label="item.label" :value="item.value"></el-option&g