element
关注
分享
扫一扫
文章平均质量分 75
Beam007
这个作者很懒，什么都没留下…
展开
-
【element ui】问题集锦
现象：在el-dialog弹出框中使用到el-table列表时，右侧操作栏设置了fixed=“right”，第一次打开弹框正常，关闭后再次打开，发现操作栏全都往下移动了一行，导致表格行错位。解决：官方文档有提供方法doLayout，但没明确什么情况下使用，或许此时就能用。监听data变化后，需要重新渲染el-table时，调用doLayout该方法即可。代码：watch: { '$attrs.data': { handler (val) { this.$refs.com原创 2022-03-29 16:57:16 · 2170 阅读 · 0 评论 -
el-menu 菜单组件的优化
问题：选中菜单，路由跳转了，但需要点击两次才有选中的颜色。F12查看，第一次点击时没有绑定上.isactive，第二次点击才绑定该样式。原来使用router模式是没有这个问题的，但是现在不用router模式，通过select方法跳转路由。原因：router模式下，路由根据index绑定值进行跳转。而index绑定值需要唯一，如果存在路由为空串’'容易出现点击空串的节点展开了全部等问题。并且系统中容易出现路由不唯一的情况，只有code\id\sn才能保证唯一性。于是只能舍弃router模式，@原创 2021-08-23 09:56:01 · 1881 阅读 · 0 评论 -
el-tree 设置默认值
el-tree 单选树设置默认值<el-tree ref="tree" :data="treeMenus" :props="defaultProps" accordion @node-click="handleNodeClick" :node-key="nodeId" :filter-node-method="filterNode" highlight-current :expand-on-click-node="true" :default-expanded-keys="[defaultId]"&原创 2021-08-20 17:22:06 · 3060 阅读 · 0 评论 -
el-upload文件单独上传和同接口信息一起上传
需求一：录入信息和图片，分成两个接口，图片选中后直接上传，将返回的ID存入录入信息接口的相应字段。代码：<el-form-item label="营业执照" prop="businessLicense"> <label slot="label">营业执照 （请上传20M以内的图片）</label> <el-upload :disabled="justCheck" ref="proUpload" action="`后台文件上传接原创 2020-12-11 16:53:15 · 1891 阅读 · 2 评论 -
同时获取el-select的value和label
方法一：数组循环遍历匹配value值相等通过对el-option绑定的数组循环遍历匹配value值相等时获取label缺点：如果el-option绑定的数组可动态变化就糟糕了。方法二：value上绑定对象 不是绑定值缺点：value绑定对象对赋值处理增加了难度方法三：通过ref获取<el-select ref="labelSelect" @change="changeSelect"> <el-option v-for="item in testArr" :key="it原创 2020-11-26 09:09:25 · 2396 阅读 · 0 评论 -
修改el-dialog动画导致在有threejs的页面闪动的问题
修改el-dialog动画代码如下：/* dialog框显示和隐藏的动画效果 改浮现方式从左往右出现 */@keyframes dialog-fade-in { 0% { transform: translate3d(-100%, 0, 0); opacity: 0; } 100% { transform: translate3d(0, 0, 0); opacity: 1; }}@keyframes dialog-fade-out { 0% {原创 2020-06-18 16:57:38 · 865 阅读 · 0 评论 -
el-table自定义表头顺序错乱，以及sortable排序混乱
前提：自定义报表，需要自定义表头层级。关键代码：// el-table<el-table :data="reportData" width="100%" height="100%"> <navReport :navReports="reportHeader"></navReport></el-table>// 自定义表头组件<template> <div> <!-- <el-table-col原创 2020-06-08 16:51:33 · 5951 阅读 · 4 评论 -
el-row和el-col问题汇总
一、el-col为空不显示<el-row> <el-col :span="7">啊啊啊</el-col> <el-col :span="1"></el-col> <el-col :span="7">哦哦哦</el-col> <el-col :span="1"> </el...原创 2020-03-16 16:49:04 · 13401 阅读 · 0 评论 -
重复点击同一个菜单路由 报错NavigationDuplicated
现象连续点击同一个路由，第二次点击时报错NavigationDuplicated。如图所示：对比另一个系统没有出现这个问题，对比两个系统使用的element-ui的版本果然不同。解决于是查看当前系统的package-lock.json中所使用的element-ui版本为2.8.2"element-ui": { "version": "2.8.2", "resolved": ...原创 2019-12-06 14:09:21 · 990 阅读 · 0 评论 -
element ui数字类型校验的问题
代码<el-dialog v-dialogDrag width="800px" :visible.sync="dialogVisible" @close="reset" > <el-form :model="deviceBox" :rules="rules" ref="deviceBox" label-width="100px"> <el-form-item ...原创 2019-12-06 13:39:35 · 5784 阅读 · 0 评论 -
el-dialog获取其中的dom节点方法
存在对话框：<el-dialog :visible.sync="dialogVisible"> <div id="devModel"></div></el-dialog>问题代码：this.dialogVisible = truelet dom = document.getElementById('devModel')console....原创 2019-12-06 13:33:51 · 3154 阅读 · 1 评论 -
element ui的双层el-dialog样式控制
关键代码如下：<html> <head> …… </head> <body> <div class="dept"> <el-dialog width="450px" :visible.sync="dialogVisible"> <el-button v-model="deptBox.pare...原创 2019-08-30 16:40:28 · 8225 阅读 · 0 评论 -
element ui的el-select框和选项框的宽度设置问题
最终效果图有数据时：无数据时：常见情况-有数据时代码：<el-select v-model="devType" style="width:100%"> <el-option v-for="item in devTypes" :key="item.value" :label="item.label" :value="item.value"></el-op...原创 2019-04-30 16:34:04 · 80040 阅读 · 17 评论 -
element ui的el-table的row-class-name属性挂载表格行样式的问题
属性row-class-name：行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。代码：<el-table ref="singleTable" :data="tableData" :row-class-name="tableRowClassName">// 表格整行背景色闪烁tableRowClassName ({row, r...原创 2019-04-30 16:48:38 · 4343 阅读 · 0 评论 -
前后端分离——element ui问题记录
一、菜单路由跳转要实现路由跳转，先要在el-menu标签上添加router属性。然后只要在每个el-menu-item标签内的index属性设置一下url即可实现点击el-menu-item实现路由跳转。当然也可以在每个el-menu-item标签内的router属性设置一下url即可实现点击跳转切优先级较index高。二、是否只保持一个子菜单的展开配置时报错配置：<el-...原创 2018-10-30 17:25:33 · 3683 阅读 · 0 评论 -
element ui的el-tree文字显示不全的解决办法
element ui的el-tree文字显示不全的解决办法方法一： 最简单的设置横向滚动条方法二： 添加拖拽条改变外层容器宽度方法三： 通过...表示 鼠标移上去显示全称使用element ui的树组件el-tree时，经常出现如下问题：el-tree渲染时因为文字内容长度不一致，导致过长的文字无法显示完全。经尝试发现如下三种解决方法，推荐方法三。方法一： 最简单的设置横向滚动条效果：...原创 2018-11-20 16:40:12 · 21834 阅读 · 23 评论 -
element ui的el-tree多选树(复选框)父子节点关联不关联的问题
属性check-strictly官方文档提供属性check-strictly，在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false。而此属性的意思是：默认false，父子关联。有如下现象及问题：1、当你通过函数设置勾选节点的时候，只要父节点被勾选子节点必会勾选上，即便设置勾选的list中无此子节点。2、当你点击勾选复选框时候，若点击父节点，其下子节点全部统一跟随父...原创 2019-02-21 11:50:27 · 31601 阅读 · 43 评论 -
element ui的el-input-number修改数值失效的问题
问题代码目的：实现去掉小数位。<el-input-number v-model="cycle" @change="vaidateCycle"></el-input-number>vaidateCycle () { let re = /^[0-9]+$/ if (!re.test(this.cycle)) { this.$message.error('请输入1~...原创 2019-04-04 17:28:06 · 27682 阅读 · 3 评论 -
element ui的菜单default-active默认选中的问题
代码如下：<el-menu router :default-active="currentMenu" active-text-color="#7BE4FF" :unique-opened="true"> // 此处navMenu 组件中:index="navMenu.sn" <navMenu :navMenus="menuData"></navMenu>...原创 2019-05-30 15:50:17 · 31947 阅读 · 4 评论 -
element的导航栏修改其选中时颜色的问题
修改element导航栏选中时的背景色，通过浏览器选中导航栏查看可知修改样式.el-menu-item.is-active即可。于是…….el-menu-item.is-active { background: #247bb4 !important;}以为完事了吗？不不不正常使用时效果确实达到了但是长时间闲置页面，再回头看这个页面时会出现哪里来的灰色？？？鼠标点击界面任...原创 2019-06-06 17:21:40 · 23401 阅读 · 33 评论 -
element ui的el-dialog点击关闭的问题
el-dialog属性close-on-click-modal，是否可以通过点击 modal 关闭 Dialog，默认为true。现象正常设置后，有时点击没有关闭对话框，而是先亮了，然后再次点击才成功关闭对话框。原因弹出对话框后发现，el-dialog__wrapper被设置了margin-top，导致上面部分没有dialog遮罩。因此，点击上半部分会出现，先亮屏幕再次点击才能关闭，点...原创 2019-04-30 15:47:34 · 17448 阅读 · 0 评论