随笔分类 -  Element-Ui使用总结

解决 el-table在ie11中默认状态下不是百分百展开的问题
摘要：背景： vue + electronUI 问题： 初始化进页面的时候会有这个问题，但是切换别的标签再回到内容标签后显示正常 谷歌正常，火狐正常，ie11不正常 解决方法： 1.在选项卡结构上添加样式 2.在父级添加自己定义的类名.workflow-detail-tabs,重定义表格样式 //main 阅读全文
posted @ 2020-05-12 10:17 熊削铁如泥-厚积薄发 阅读(1163) 评论(0) 推荐(1)
解决 el-table 在横屏与竖屏切换的过程中无法自动适配的问题
摘要：背景：平板项目，使用 element-ui bug场景：平板默认竖屏时表格是自适应的，平板默认是横屏时也是自适应的，但是当横屏切换到竖屏之后，在竖屏的状态下，表格变成横向滚动的了 根据用户需求，不想要滚动 解决思路： 监听横竖屏，重新加载组件（不太好，会频繁的发送请求） 监听横竖屏，重新加载css文 阅读全文
posted @ 2020-04-30 11:20 熊削铁如泥-厚积薄发 阅读(866) 评论(0) 推荐(0)
解决 el-select 与 el-radio 组合字体发生闪烁问题
摘要：vue-layer弹出层中，使用 el-select 与 el-radio 结构，点击下拉或勾选的时候，整个页面发生闪烁，字体也会变模糊 <g-form class="g-from-typography-many" :labelSuffix="''"> <el-row> <el-col :span= 阅读全文
posted @ 2020-04-01 16:26 熊削铁如泥-厚积薄发 阅读(1365) 评论(0) 推荐(0)
解决element生成的下拉菜单，不在父级之下，而是在body之下，通过父级控制该下拉菜单的样式，达到不跟别的地方冲突的目的
摘要：项目中存在多个下拉菜单，每个下拉菜单的样式可能不同 不能直接拿到element里面的类名来修改，这样会导致全局统一 在下拉菜单上定义一个父级类名，通过这个父级类名来定义这些下拉菜单的样式，达到私有化 遇到问题，生成的下拉菜单跟父类不在同一个节点，无法通过父级类来指定样式 解决方案：在下拉菜单的结构上 阅读全文
posted @ 2020-03-20 12:01 熊削铁如泥-厚积薄发 阅读(1277) 评论(0) 推荐(0)
饿了么 <el-input></el-input>输入框获取与失去焦点事件
摘要：//1.定义focus事,绑定属性 <el-input v-model="headerInput" @focus="onInputFocus" @blur="onInputBlur":style="thisStyle"> </el-input> thisStyle:'',//2.获得焦点事件 onI 阅读全文
posted @ 2019-11-06 17:18 熊削铁如泥-厚积薄发 阅读(16138) 评论(0) 推荐(0)
组件传值-实现把表格当前数据赋值给弹窗组件
摘要：需要实现的功能: 点击"编辑"按钮的时候,弹出编辑页面,并把当前表格行数据,赋值给弹窗组件里面的表单 1.绑定事件,传递索引值 2.定义事件内容 数组结构如下: 阅读全文
posted @ 2019-08-15 17:32 熊削铁如泥-厚积薄发 阅读(1123) 评论(3) 推荐(0)
element-ui弹窗实现自定义宽度
摘要：<el-dialog :title="title" :visible.sync="hiddenDialogCommon" :width="width" @close="closeDilog('refCommonForm')" > width: { type: String, default: '54%' }, :width="'30%'" 阅读全文
posted @ 2019-08-15 15:38 熊削铁如泥-厚积薄发 阅读(5237) 评论(0) 推荐(0)
element-ui 复选框,实现点击表格当前行选中或取消
摘要：背景: 1.表格结构绑定事件 2.定义复选框结构 数组结构 3.定义事件,实现当前表格行点击以后复选框被选中,再点击一次的时候,复选框被取消 检查的时候发现，这样会导致原有复选框的勾选事件失效，原因是表格行事件的内容与复选框事件的内容都执行了一次，所以就失效了 解决办法是去掉表格行事件，保留复选框原 阅读全文
posted @ 2019-08-08 17:20 熊削铁如泥-厚积薄发 阅读(9849) 评论(0) 推荐(0)
element-uI隐藏表格头部
摘要：1.表格结构定义 :show-header="hiddenTableHeader" 2. data里面定义 阅读全文
posted @ 2019-08-08 09:33 熊削铁如泥-厚积薄发 阅读(4073) 评论(0) 推荐(0)
elementUI拿到当前表格行的数据的另一种写法
摘要：背景： 这里是通过点击“修改”按钮后才拿到当前行的数据，不是点击当前行任意位置拿到数据，所以不能用 @row-click 方法 改用点击的时候直接拿到这个表里面的这一条数据 1.绑定事件 2.拿到数据 阅读全文
posted @ 2019-08-07 19:26 熊削铁如泥-厚积薄发 阅读(1129) 评论(0) 推荐(0)
elementUi-复选框，使用v-for循环出来的复选框,默认多个值为勾选状态
摘要：1. 使用 v-model="BottomSelectFor[index].tick" 绑定要默认勾选的状态 2.在数组中定义 tick:true,没有的字段默认为false 3.实现效果 阅读全文
posted @ 2019-08-07 18:03 熊削铁如泥-厚积薄发 阅读(6458) 评论(0) 推荐(0)
点击事件，根据不同的下标实现切换不同的内容
摘要：背景： 两个表格，根据左边的表格的点击事件 右边的表格切换展示的内容 1.绑定事件，获得当前表格点击行的下标 2.定义4个数组，默认结构为空数组 3.组件加载的时候，把第一个数组赋值给表格 4.定义事件内容，实现根据当前行的下标切换对应的内容 阅读全文
posted @ 2019-08-07 17:36 熊削铁如泥-厚积薄发 阅读(421) 评论(0) 推荐(0)
elementUI表格行的点击事件，点击表格，拿到当前行的数据
摘要：1.绑定事件 2.定义事件 3.点击表格某行的时候，拿到数据] 阅读全文
posted @ 2019-08-07 16:42 熊削铁如泥-厚积薄发 阅读(18775) 评论(0) 推荐(2)
在使用element-ui搭建的表格中,实现点击"定位"按钮后,屏幕滚动到对应行的位置
摘要：背景: 一个后台管理系统,当管理员登录之后,会存在一个自己的id值, 在一个表格中,当点击"定位"按钮后,屏幕滚动到拥有管理员id的这一行,并且给设置一个高亮的背景 相关知识点: 查找数组中是否存在某个字段 获取父节点 获取全部子节点 动态添加id 屏幕滚动到指定位置 ...... 1.定义事件 2 阅读全文
posted @ 2019-08-05 19:11 熊削铁如泥-厚积薄发 阅读(4366) 评论(0) 推荐(0)