elementUi
CaseyWei
感激每个遇见的人
展开
-
element ui表格表头顺序错乱的问题
因为在项目中两个表格共用了同一个组件, 但由于表头不完全相同, 就通过v-if来控制表头的显示隐藏,没想到造成了表头顺序的错乱, 经过多方查找资料,最后找到了解决方法:即为每一列el-table-column添加key属性,可以使用随机数: :key="Math.random()"链接:https://www.cnblogs.com/puerile/p/11899105.html...原创 2021-03-15 10:03:44 · 1242 阅读 · 2 评论 -
Vue element-ui之Loading 加载
Loading 加载:加载数据时显示动效。Loading 可以以服务的方式调用。引入 Loading 服务:import { Loading } from 'element-ui';在需要调用时:Loading.service(options);其中 options 参数为 Loading 的配置项,具体见下表。LoadingService 会返回一个 Loading 实例,可通过调用该实例的 close 方法来关闭它:let loadingInstance = Loa原创 2020-12-05 19:13:07 · 4646 阅读 · 0 评论 -
elementUI监听表格展开事件
在table type="expand"打开时执行一个请求,并处理逻辑,在官网中发现一个方法可以实现HTML<el-table style="width:100%;margin-bottom: 15px;" :data="Tabledata.filter(data => !search || data.fault_hop.toLowerCase().includes(search.toLowerCase())||data.network_level.toLowerCas原创 2020-11-16 17:26:48 · 1859 阅读 · 0 评论 -
(转)element 的dialog嵌套问题,第二次弹出的会被遮住的解决办法
今日在做项目的时候,遇到一个小问题,在同一页面,使用Element的弹框组件,却发现第二次弹框得鼠标点击之后才会显示变亮,似乎被遮住了!(如图效果);才发现,element 的dialog嵌套问题,之所以第二次弹出的会被遮住,是因为没有给定 append-to-body正常情况下,我们不建议使用嵌套的 Dialog,如果需要在页面上同时显示多个 Dialog,可以将它们平级放置。对于确实需要嵌套 Dialog 的场景,我们提供了append-to-body属性。将内层 Dialog 的该属性.原创 2020-11-15 18:01:16 · 1952 阅读 · 0 评论 -
使用element-ui的el-tree组件setCheckedKeys设置无效的解决办法
例子1:问题原因:this.$refs.tree.setCheckedKeys(this.defalutArr),发现使用setCheckedKeys方法无效,换做setChecked方法可以解决获取数据解决:if (res.data.code == 200) { //默认选中的树的数据 setTimeout(() =>{ res.data.data.forEach(value => { this.$refs.rootTree.setCheck原创 2020-09-29 17:24:17 · 22980 阅读 · 3 评论 -
ElementUI——table复选框的全选功能禁用或者隐藏
场景:今天来个新模块,要求表格多选框显示,但是一次只能操作一个多选框,所以需要把全选框隐藏处理使用header-cell-class-name 给表头单元格设置一个className用于修改样式: <el-table ref="mulChoose" :data="chooseList" style="width: 100%" :row-style="{height:'46px'}" .原创 2020-08-31 17:56:49 · 11050 阅读 · 4 评论 -
Element-ui自定义table表头,修改列标题样式、添加tooltip文字提示
由于Element-ui官方在2.4.11及以后的版本中添加了自定义表头的方法,如果你的Element-ui版本是在2.4.11以上,建议参考我的另一篇博客element-ui table列表自定义表头,修改列标题样式、添加tooltiprender-headerrender-header在官方文档中的介绍是这样的:参数 说明 类型 可选值 默认值 render-header 列标题 Label 区域渲染使用的 Function Function(h, {原创 2020-08-31 14:12:45 · 4372 阅读 · 0 评论 -
(转)el-dialog对话框组件title插槽的使用
需求dialog对话框组件title属性的slot使用方法,需要单独控制title中某个数据显示及样式解决方案如下: <el-dialog :visible.sync="dialogVisible" > // 这里的插槽会替换title显示的内容 - 重点 <div slot="title" class="header-title"> <span class="name">{{ name }}</span> .原创 2020-08-31 14:09:01 · 3729 阅读 · 1 评论 -
火狐浏览器css深度选择器/deep/失效问题解决办法
问题:父级用了/deep/,之后的子级不能用,否则会失效。chrome不会有问题解决办法:复制粘贴一份样式,子级不再使用/deep/深度选择器,从而兼容火狐浏览器实例:<style lang="scss" scoped>.dialog-index /deep/ .el-dialog { height: 100% !important; & /deep/ .el-dialog__body { height: calc(100% - 120px);原创 2020-08-18 10:37:10 · 2550 阅读 · 0 评论 -
element组件库el-dialog里边包含子组件的mounted钩子只执行一次的解决办法
问题:在Vue开发中,有时需要我在同一个页面或列表中,多次加载同一个组件,但问题来了。(例如使用:新增、编辑、详情,使用弹框组件时)该组件只在页面加载中,加载一次,后面不会再加载了,如el-dialog解决办法如下:在组件标签中加v-if来控制组件el-dialog的出现与否,每次弹出el-dialog,都会执行mounted,而不加v-if只会执行一次生命周期钩子函数。实例:<el-dialog title="" width="40%" :visible.sync="dial原创 2020-08-17 19:59:20 · 2303 阅读 · 3 评论 -
vue使用element组件库中日期选择器实现以月份为刻度,只能选择上个月份之前的月份
最近新版本有个需求是日期选择器以月份为刻度,只能选择上个月份之前的月份,平时这种业务需求不多,于是实现后记录下~<el-date-picker v-model="declareYearMonth" type="month" placeholder="请选择计佣年月" format="yyyy 年 MM 月" value-format="yyyy-MM" :picker-options="pickerOptions"></el-date-picker>expo...原创 2020-08-11 10:42:28 · 1954 阅读 · 0 评论 -
SassError: expected selector. & /deep/ .el-input__inner{ 的解决办法
场景:使用element-ui穿透一些组件库样式的时候发现报格式错误,如下图在vue-loader官网看到这样一句话:解决办法:/deep/ 替换成 ::v-deep实例:原创 2020-07-09 18:58:33 · 5120 阅读 · 0 评论 -
Element UI[Vue warn]: Invalid prop: type check failed for prop "index". Expected String, got Number.
项目用到element-ui的menu组件发现接口返回的index字段值数据类型是字符串,但是控制台还是报红看着很难受-_-解决办法:index + 空字符串 转换为字符串...原创 2020-03-02 09:33:59 · 561 阅读 · 0 评论 -
Unknown custom element did you register the component correctly
1、错误描述vue.esm.js?efeb:591 [Vue warn]: Unknown custom element: <el-container> - did you register the component correctly? For recursive components, make sure to provide the "name" option.fou...原创 2019-04-09 21:43:31 · 12063 阅读 · 1 评论 -
element UI 、iview等插件修改局部样式不影响全局环境
第三方UI插件可以帮我们大大提高开发效率,尤其是组件绑定了很多事件,方便我们使用。但是样式可能会不适合,所以就需要做出修改方式一:修改第三方插件首先要去掉scoped,否则修改样式不生效,但是会出现一个问题,去掉scoped就代表该样式是全局的,修改的插件样式会影响全局,怎么办呢,我们在插件样式的外面定义一个父盒子包裹一下就可以啦,既能修改样式,又不会污染全局环境。例如: .logi...原创 2019-03-30 09:02:49 · 1709 阅读 · 0 评论 -
/deep/ --------------- less深度作用域
https://vue-loader.vuejs.org/zh/guide/scoped-css.html#子组件的根元素深度作用选择器如果你希望scoped样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用>>>操作符:<style scoped>.a >>> .b { /* ... */ }<...原创 2019-03-30 08:59:22 · 16676 阅读 · 0 评论