element
你吃香蕉吗?
踏上山巅的每一步都有可能跌落,重要的是可以告诉自己继续走下去,并且是这样做的,那么,你终会看到满天繁星,日出东方。
展开
-
Vite2+TS+el3获取DOM元素设置类型并进行表单校验
1、设置el-form的表单ref属性 <el-form ref="ruleFormBox" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" .原创 2022-01-02 16:33:57 · 1141 阅读 · 0 评论 -
for循环生成表单,表单校验失效
在实际业务场景中,我们可能需要动态循环生成多个form表单(并且有表单校验),而每个form表单中又可能需要动态控制某一项item的显示隐藏,在我的实际工作中,控制表单的显示隐藏时,多使用的v-if,而此时表单校验会呈现出校验失效、未触发的情况。原创 2021-12-07 13:46:26 · 1476 阅读 · 0 评论 -
elementUI无线滚动+监听滚动条触底
elementUI无线滚动、vue监听滚动条触底原创 2021-12-02 10:12:01 · 2664 阅读 · 0 评论 -
el-table多选+搜索
一、问题描述: 表格数据是一次性从后端获取到了全部的数据(可前端假分页),在模糊检索表格数据时,因为el-table的数据源data发生了变化,重新触发了@selection-change事件,此时如果仅仅是在@selection-change事件对应的方法中对回显的选中项(获取到表格数据要回显的选中项目)进行赋值,会导致选中项被清空,无法保留之前的选中项。二、解决历程:我想大家的想法应该和我的差不多,对初始的选中项进行记录,随后再进行回显以及数据改变的处理逻辑,没...原创 2021-11-15 11:12:47 · 1436 阅读 · 0 评论 -
element样式修改
一、日期选择器边框样式/deep/ .el-input.is-active .el-input__inner, /deep/ .el-input__inner:focus{ border-color: #ABB3CC;}修改前:修改后:二、下拉选样式/deep/ .el-select .el-input.is-focus .el-input__inner, /deep/ .el-select .el-input__inner:focus { border..原创 2021-11-04 11:05:41 · 340 阅读 · 0 评论 -
Element Message封装---避免多个消息提示同时出现,仅显示一个
一、场景描述 在实际开发过程中,我们都需要对401(身份认证过期)进行处理,并使其跳转登录页。但是我们在身份认证过期时刷新页面,此时所在页面如果存在有多个请求同时发送,那么就会出现一次弹窗多次消息提示的情况,极大的影响用户体验。二、解决思路 对element message进行二次封装。 两种实现方式: 1、在封装方法中对当前弹窗状态进行记录,如果当前存在弹窗,则调用element message的clos...原创 2021-10-27 16:06:35 · 4841 阅读 · 0 评论 -
el-select自定义文本框内容
效果:代码:<el-select style="width:100%;" v-model="form.transportNumberPlate" filterable :disabled="readonly" remote placeholder="请输入关键词" :remote-method="searchPlateNum" @change="handleSelectPlateNum" :l...原创 2021-08-16 13:57:23 · 6119 阅读 · 2 评论 -
el-date-picker开始结束日期相互限制
官网对于picker-options的定义及参数:实现: 实现开始日期结束日期的关键点在于,要以对方的选择日期为条件,防止报错,必须判断是否为空。HTML<el-form-item class="row_item_time" label="期限:" prop="contractStartTime"> <el-col :span="11"> <el-form-item prop="contractStar...原创 2021-08-03 13:39:28 · 727 阅读 · 1 评论 -
关于深度选择器/deep/(::v-deep)和>>>
深度选择器为什么出现? 在使用vue开发时组件私有化样式时使用scoped实现,此时我们使用普通的方式修改第三方库某些样式,如elementui组件的样式是不生效的。原因是scoped会自动在元素上添加一段特殊的标识,如:v-data-254811...等。使用>>><style scoped> #app >>> a { color: red }</style> 但是如...原创 2021-07-31 23:17:41 · 7315 阅读 · 0 评论 -
el-table多选回显、翻页序号递增
实现要点: 1、多选回显:reserve-selection在type="selection"上定义,作用是保留之前选择的数据(也就是表格翻页选择项不丢失);selection-change事件,当选择项发生变化会触发此事件;row-key:reserve-selection 功能的情况下,该属性是必填的;this.$refs.singleTable.toggleRowSelection(row,true)控...原创 2021-07-30 11:26:11 · 1395 阅读 · 0 评论 -
el-tree结合搜索框动态控制tree懒加载(后台搜索)
实现关键点:this.$refs.tree.$data.store.lazy 控制lazy属性是否是生效的,取值为Boolean;node-key="id" 用于展开搜索出的节点default-expanded-keys="expandArr" 默认展开节点的数组代码:HTML<el-tree ref="tree" :data="treeData" :load="loadNode" :props="def...原创 2021-07-29 11:05:35 · 1938 阅读 · 6 评论