【element ui】问题集锦

前言

将以往文章的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>
</el-select>
</
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue是一种流行的JavaScript框架,用于构建用户界面。它具有简单易学、灵活和高效的特点,被广泛应用于Web开发中。 Element UI是一个基于Vue的UI组件库,它提供了一套美观、易用且高质量的组件,可以帮助开发者快速构建现代化的Web应用程序。Element UI的组件包括按钮、表单、弹窗、导航菜单等,涵盖了常见的UI需求。 使用Element UI可以极大地提高开发效率,因为它提供了丰富的组件和样式,开发者可以直接使用这些组件来构建页面,而不需要从头开始编写样式和交互逻辑。 Element UI的安装非常简单,可以通过npm或者yarn进行安装。安装完成后,只需要在Vue项目中引入Element UI的样式和组件,就可以开始使用了。 以下是一个使用Element UI的示例代码: ```vue <template> <div> <el-button @click="showDialog">打开对话框</el-button> <el-dialog :visible.sync="dialogVisible" title="对话框标题"> <p>这是一个对话框的内容</p> </el-dialog> </div> </template> <script> import { ElButton, ElDialog } from 'element-ui'; export default { components: { ElButton, ElDialog, }, data() { return { dialogVisible: false, }; }, methods: { showDialog() { this.dialogVisible = true; }, }, }; </script> ``` 在上面的代码中,我们使用了Element UI的`el-button`和`el-dialog`组件来创建一个按钮和一个对话框。当按钮被点击时,通过`showDialog`方法将对话框的可见性设置为`true`,从而打开对话框。 以上就是Vue和Element UI的简单介绍和示例代码。如果你有任何进一步的问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值