element-ui
AlexKain
不相信天分,只相信汗水
展开
-
elementUI的日期选择器携带至今的临时方案
在ElementUI的el-date-picker组件中添加至今选项提示:以下是本篇文章正文内容,下面案例可供参考思路:通过判断点击的 至今 按钮给当前行添加一个is_to_date状态字段,这个is_to_date有以下功能:用于控制当前的日期选择器是否是必填,用于控制placeholder显示 至今 这个字符给当天的日期组件添加修改placeholder样式的className原创 2022-02-18 16:41:40 · 2242 阅读 · 0 评论 -
elDatePicker动态限制选择特定日期范围
需求场景复现(需要安装dayjs插件):使用时间范围组件el-date-picker其type="daterange"时间组件的选择下拉框展开时,时间可以任意选择.用户点击了第一次,出现选择范围,目前是一个月(也就是当前选中的日期,前后一个月之内都是可选的,大于或小于时间范围的都不可选中)如果用户第二次点开,时间范围不可选的限制要取消// 平常使用的版本// html部分<el-date-picker v-model="params.receiving_time" typ原创 2021-03-31 10:43:53 · 2644 阅读 · 4 评论 -
[vue][element-ui][el-table]控制表格的滚动条滑动到最右边
场景复现表格宽度过长产生了横向的滚动条,实行当前页的编辑时会触发表格的数据重新渲染,重新渲染时,会降滚动条拉到最左边,这就就要在列表动态渲染完之后,将滚动条拉回最右边方法refs[‘tableList’]上有一个bodyWrapper里面有scrollLeft 属性,可以设置表格左滑动的距离为整个表格的宽度,而表格的宽度在refs[‘tableList’].bodyWidth,替换字符串和变数字以后就可以了JS部分this.$nextTick(()=>{ this.$refs.table原创 2021-03-10 09:28:39 · 3742 阅读 · 4 评论 -
如何在el-table中传递index到el-checkbox
表格的多选传递scope.$index的传递方式<el-checkbox v-model="scope.row.show" :true-label="1" :false-label="0" @change="handleCheckItemChange(scope.row.show,scope.$index)"></el-checkbox>js部分// 行级按钮事件handleCheckItemChange (val, i) { console.log(val, i)}原创 2020-09-07 16:53:01 · 1226 阅读 · 0 评论 -
[element-ui] form的多个字段之间联动验证和取消验证
目录字段: 去/返程日期(deptDate), 去/返程班次(flghtTrainSchedNo)HTML片段JS片段字段: 去/返程日期(deptDate), 去/返程班次(flghtTrainSchedNo)页面一进入时,都为非必填项,逻辑出现必填的范围只有飞机和火车,汽车和自驾没有必填的验证如果用户操作了,其中一项,两者都为必填如果用户删除了一项且另一项无值时,变为非必填如果先点击了飞机或火车再去点击汽车和自驾,则取消验证必填项使用监听触发验证和取消验证简单的描述: 两者一个有值时原创 2020-05-27 18:43:10 · 4608 阅读 · 0 评论 -
elementUI的表格标题换行
表头换行显示 <el-table :data="list" class="table-border text-noellipsis"> <el-table-column prop="rptDate" label="日期" :formatter="formatDate"></el-table-column> &am原创 2018-11-27 10:05:35 · 5313 阅读 · 0 评论 -
elementUI:关于elInput框和elSelect宽宽度不统一的设置技巧
因为el-select右边有一个icon图标(右边的padding为35px),而el-input只有15px,所以就存在了一个宽度的误差.<el-form-item label="头衔" class="transparentIcon" prop=""> <el-input placeholder="" v-model="form.basicInfo" su原创 2018-12-28 15:11:41 · 26089 阅读 · 13 评论 -
无刷新填充数据时清除elementUI的elTable排序状态的className
场景复现:页面无刷新时,点击tab切换,需要清除排序条件,虽然排序条件可以清除,但是th的排序className还存在思路:在点击切换tab时,无论是跳转新页面,还是跳转当前页面,都是恢复初始状态(清除排序条件)/** * 清除点击切换step===0时,库存排序的className('descending','ascending') * 原因:这个时候params.orderBy已...原创 2018-12-29 16:26:44 · 1902 阅读 · 2 评论 -
elementUI:阻止form的enter(回车键)事件
<el-form :inline="true" :disabled="disabled" @submit.native.prevent> <el-form-item label="请设置预警值"> <el-input type="number" maxlength="50" v-model="warningValue原创 2019-01-08 12:55:48 · 10921 阅读 · 0 评论 -
日常使用代码块:elementUImessagex弹窗(确定按钮在左边)
日常使用代码块备份this.$confirm('确定删除该条记录吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', customClass: 'confirm-box', type: 'warning'}).then(() => { if(!this.isValidNot0(item.id)){t...原创 2019-01-14 16:25:10 · 3034 阅读 · 1 评论 -
每日三思:element-ui利用form表单验证来验证表格
动态验证表格里的输入框效果图<el-form :model="form" :rules="rules" ref="form"> <el-table class="form-brand-list" stripe v-if="form.prdctStoreList && form.prdctStoreList.length > 0" :data="fo...原创 2019-06-19 18:18:56 · 440 阅读 · 0 评论 -
[element-ui]el-selected的衍生操作:在v-model上显示value和label的拼接
效果图思路给请求的结果设置不同的显示类型下拉框显示的value和label值设置选中值的时候显示的对应的值(value和label拼接起来)当选中的时候,value就会显示拼接过的字符串注意事项如果这个地方做请求参数的时候,要做剪切,只取value值!!! 切记实现过程接口处理// 获取结算账户getListPayBank(){ apiListPay...原创 2019-09-05 16:10:53 · 3453 阅读 · 0 评论 -
[element-ui]el-table中设置类似标签的样式
效果图思路与分析可以直接使用定位做给对应的单元格添加相应的class类不能使用图片做,要使用背景和css3的伪类(画白色的三角)注意事项自身容器高度的限定及宽度的限定,自身padding-bottom的设定,避免字过长时压住白色三角,白色三角的高度不能过长,效果图上是0.05rem;且border宽是父级容器宽的一半,底部的border高度是border宽的一半父级...原创 2019-09-05 17:03:40 · 2080 阅读 · 0 评论 -
知识点总结:element远程下拉搜索el-autocompleted的自动补全使用方法和注意事项
注意事项使用时需要注意cb(list)函数里面list的格式,必须存在的是value值代码<el-autocomplete v-model="formCust.custCellphnNo" class="width-200" @keyup.enter.native="checkTel" @change="checkTel" :fetch-suggestions="q...原创 2018-11-12 12:14:58 · 4773 阅读 · 1 评论 -
element-ui:非v-model绑定的自身属性的form表单验证
场景还原:在el-form-item上绑定的验证并不是el-form-item里面的v-model,而是经过换算的值code:<el-form :model="dialogFeedback" :rules="dialogFeedback_rules" ref="dialogFeedback" :label-position="labelPositionRight" label-widt...原创 2018-10-17 16:59:35 · 7076 阅读 · 0 评论 -
vue爬坑记:element-ui的标签页之间跳转的手动控制
控制标签页之间的跳转-手动控制页面<el-row class="marginTop5"> <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :span="24" class="t-c-t"> <原创 2018-07-06 10:21:42 · 11957 阅读 · 0 评论 -
vue爬坑记:element-ui的table中单选按钮的设置
<el-table-column align="center" label="主经营品牌"> <template slot-scope="scope"> <!-- class="textRadio" --> <el-radio @change原创 2018-07-06 19:59:06 · 18194 阅读 · 2 评论 -
element-ui 表单验证时规则对象二级验证失效 - 记录贴(已解决)
解决方法 页面DOM对应元素中prop修改为 prop=”address.detlAddrMemo”; rules中的键值改为”address.detlAddrMemo”失败的案例验证规则rules: { detlAddrMemo: { required: true, message: "请输入门店编号", ...原创 2018-07-19 15:57:06 · 395 阅读 · 0 评论 -
element-ui使用v-for来遍历el-radio - 学习记录帖
<el-form-item label="员工性别" label-width="1rem" prop="sttusCodes"> <el-radio-group v-model="radio" @change="onRadioChange"> <el-radio :label="item.value" :原创 2018-07-31 10:29:35 · 29042 阅读 · 3 评论 -
element-ui 保存时的思路逻辑整理
存在两种情况:新增和编辑编辑时,重要的一步是要把传过来的index放到config中,也就是更新新增时,要判断config.index是否存在,不能直接使用if(this.config.index){}因为当数据里面的第一个数据的index为0时就成了新增了,要使用if(this.config.index!==”)来使用更重要的一点,数据添加完之后,要恢复数据的默认值,把this.con...原创 2018-08-01 12:00:09 · 1189 阅读 · 0 评论 -
element-ui 的el-radio-group组件
在组件中不使用:selected=”属性<el-form-item label="是否创建新用户" label-width="1rem"> <el-radio-group v-model="form.basicInfo.isCreateUser"> <el-radio :label="item.value" :key="item.v原创 2018-08-07 15:36:15 · 41243 阅读 · 4 评论 -
css遗忘篇:transform:ratate(180deg)失效的解决方法
.empMoreInfoControl { position: relative; .iconfont { position: absolute; top:.05rem; margin-left:.1rem; @extend .animation1; } &amp;.active { .iconfont { position: a...原创 2018-08-28 20:59:22 · 1503 阅读 · 0 评论 -
element-ui tabs 切换时展示的table报错_self.$scopedSlots.default is not a function
_self.$scopedSlots.default is not a function解决方法给每个table添加格key值 先暂时记录下,后面再反思原创 2018-08-31 18:47:19 · 953 阅读 · 0 评论 -
element-ui日期选择器限制选择范围
只能选当日或之前的日期//页面中的<el-date-picker type="date" value-format="timestamp" v-model="form.birthDate" placeholder="选择日期" class="display-block" :picker-options="pickerBeginDateBefore">&原创 2018-08-29 16:26:43 · 5187 阅读 · 0 评论 -
element-ui:页面请求闪烁的问题
背景:由于使用了定位的背景图片,请求时会刷新页面,导致页面闪烁处理方式 将背景图片设置为fixed弹窗 el-dialog 使用属性值控制 :modal-append-to-body="false"modal-append-to-body 遮罩层是否插入至 body 元素上,若为 false,则遮罩层会插入至 Dialog 的父元素上 boolean ...原创 2018-08-29 18:00:29 · 7077 阅读 · 0 评论 -
element-ui:class动态产值的问题记录
Q:需要根据code来显示不同的字体颜色&lt;el-table-column prop="instlSttusCode" label="分期状态" align="center"&gt; &lt;template slot-scope="scope"&gt;原创 2018-09-05 21:11:39 · 2450 阅读 · 0 评论 -
element-ui:table相关汇总和积累贴
行删除&lt;el-table-column fixed="right" label="操作" width="120"&gt; &lt;template slot-scope="scope"&gt; &am原创 2018-09-12 12:38:11 · 1132 阅读 · 0 评论 -
vue:element-ui汇总篇
键盘事件失效使用@keyup.enter=’func’不起作用 要改为@keyup.native=’func’原创 2018-07-10 17:06:57 · 300 阅读 · 0 评论