Element-UI组件库
pc端UI组件库
qq_38969618
这个作者很懒,什么都没留下…
展开
-
el-radio: 设置不显示label文本
el-raido: 设置不显示label等原创 2023-02-23 18:36:08 · 2489 阅读 · 0 评论 -
解决:el-select下拉数据过多,造成页面卡顿问题
el-select下拉数据过多卡顿解决,截取数组部分显示原创 2022-10-28 10:21:21 · 3144 阅读 · 0 评论 -
el-form:常用业务校验场景&方法
el-form常用业务场景处理&方法原创 2022-10-26 15:52:33 · 857 阅读 · 0 评论 -
自定义设置:el-steps当前激活步骤的显示颜色
【代码】自定义设置:el-steps当前激活步骤的显示颜色。原创 2022-10-26 15:48:33 · 2768 阅读 · 0 评论 -
el-table实现:单选
通过结合el-radio组件实现。原创 2022-10-24 13:51:57 · 91 阅读 · 0 评论 -
设置el-checkbox复选框禁用时,对号&文本的颜色
【代码】设置el-checkbox复选框,禁用时勾选对号的颜色。原创 2022-10-21 16:11:35 · 1780 阅读 · 0 评论 -
ElementUI源码:实用的工具函数
1. 对象的某个属性或属性值是否有定义(属性是否存在&对象的属性值是否定义)原创 2022-10-12 16:14:37 · 126 阅读 · 0 评论 -
ElementUI源码:实用的指令
1. 鼠标点击了指令所绑定元素的外部时,就会触发绑定方法。原创 2022-10-12 16:43:02 · 425 阅读 · 0 评论 -
解决:el-input添加clearable属性后出现2个×清除图标
设置.el-input__validateIcon类样式为display: none原创 2022-06-06 16:10:00 · 3564 阅读 · 0 评论 -
设置el-date-picker默认选中的时间、可选择时间的限制等
小工具:时间传转时间:时间戳(Unix timestamp)转换工具 - 在线工具Case1:分2个时间组件显示,传值为毫秒时间戳,且默认选中最近一周,时刻都需传0点0分0秒,后台会处理的。获取毫秒时间戳:(1)某个日期下某个时刻的:(new Date(年, 月, 日, 时,分,秒)).getTime()(2)获取今天此时刻的:(new Date()).getTime()...<el-form-item> <el-date-picker v-原创 2021-12-28 11:15:22 · 5762 阅读 · 0 评论 -
解决:el-input设置show-password属性后,谷歌浏览器自动填充之前输入的用户名&密码等。
给当前el-input元素添加属性:autocomplete="new-password"即可。原创 2021-12-02 14:26:57 · 2740 阅读 · 0 评论 -
实现:el-table分页勾选数据并记忆
先设置row-key属性-》再设置:reserve-selection="true"属性即可。<!-- $root为APP.vue组件中变量:this.screenHeight = window.innerHeight --><el-table ref="singleTable" v-loading="loading" :header-cell-style="{ background:'#eef1f6', color:'#606266'}" :max-height.原创 2021-11-04 15:37:08 · 572 阅读 · 1 评论 -
解决:el-table组件中设置show-overflow-tooltip属性,数据过多时闪烁不显示&不能复制问题。
使用el-popover组件代替show-overflow-tooltip属性。...<!-- 超过30个字符,将显示提示弹框 --><el-table-column label="修改内容"> <template slot-scope="{ row }"> <span v-if="row.operation_content && row.operation_content.length > 30"> &原创 2021-11-01 16:37:47 · 4582 阅读 · 0 评论 -
解决:el-table最右侧列设置fixed属性后,竖向滚动条不显示问题。
/* to fix 竖向滚动条被fixed列覆盖bug */ .main_table .el-table__fixed-right { margin-right: 12px !important; // 12px为滚动条宽度}原创 2021-09-04 11:35:16 · 1793 阅读 · 3 评论 -
自动关闭el-cascader、多选的el-select下拉框。
1. 关闭el-cascader<el-cascader :options="warehouseList" v-model="listQuery.storeList" ref="cascaderStore" popper-class="custom_cascader" :props="{label: 'storeroom_name', value: 'storeroom_id', children: 'store_list', checkStrictly: true原创 2021-08-10 17:26:39 · 3154 阅读 · 3 评论 -
【解决】el-message消息弹框的显示被el-dialog覆盖(z-index导致)
设置el-message的z-index为更大值即可。或设置el-dialog的z-index为较小值即可。原创 2021-08-06 14:26:52 · 7299 阅读 · 3 评论 -
el-table中el-cascader组件不停闪烁抖动(el-input高度不停被设置导致)
原因:级联组件中的内置的el-input组件的高度height属性不停被设置导致!解决如下(通过css):/* To fix table 中的级联组件不停抖动问题。(抖动不是table组件导致,是级联内置的el-input组件高度不停设置导致) 注:.my-custom-form 和 .fix_shake_wrap 是自定义的父容器类名。*/.my-custom-form .fix_shake_wrap .el-cascader__tags { max-height: 100px.原创 2021-08-02 11:31:31 · 2221 阅读 · 1 评论 -
设置el-input或el-select组件disabled时,突出显示placeholder文本样式
/* 输入框或下拉选框禁用时:加粗显示提示语 */ .el-input.is-disabled input::-webkit-input-placeholder{ font-weight: bold !important; color: #606266 !important; }原创 2021-05-25 15:16:00 · 1616 阅读 · 0 评论 -
设置el-table表格中数据为空时,自动展示自定义字符(css伪类:empty选择器)
/* el-table列数据为空自动显示-- */.cell:empty::before{ content:'--'; color:gray;}原创 2021-05-24 17:31:37 · 2062 阅读 · 2 评论 -
根据条件动态显示隐藏,操作按钮的el-tooltip无效问题解决
解决方法:给按钮外层添加一层包围的父元素,如span等。<!-- disabled: 控制显示隐藏 --><el-tooltip class="item" :disabled="listQuery.storeroom_ids.length > 0" effect="light" content="批量取消:需要先选择仓库库房" placement="bottom"> <span> <el-button size="mini" ty原创 2021-05-22 11:07:00 · 2147 阅读 · 0 评论 -
设置el-table可勾选的行
<el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}" ref="singleTable" :data="info_list" fit :border="true" v-loading="tabelLoading" :max-height="subTableMaxHeight" @selection-change="handleSelectionChan.原创 2021-05-20 19:55:23 · 538 阅读 · 0 评论 -
设置:el-date-picker日期时间选择器,只可以选择31天内,且默认结束为23:59:59。
<el-date-picker size="mini" v-model="form.time_range" :default-time="['00:00:00', '23:59:59']" type="datetimerange" :picker-options="timePickerOption" format ='yyyy-MM-dd HH:mm:ss' value-format ='yyyy-MM-dd HH:mm:ss' start-place.原创 2021-05-20 19:33:55 · 2895 阅读 · 0 评论 -
【总】设置el-cascader级联结构为2级时,只有第2级可勾选且点击label就可选中,且绑定值直接为第2级id数据。(popper-class属性可用来区分多个级联)
popper-class属性、css相关设置原创 2021-05-20 15:29:54 · 8768 阅读 · 1 评论