![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Element UI
xjh01
这个作者很懒,什么都没留下…
展开
-
el-table样式设置
官网的说明里没有讲清楚以上图中框出的两个属性进行说明,只需要返回style字符串就可以<el-table :header-cell-style="headerCellStyle" :cell-style="cellStyle"></el-table>然后再script里headerCellStyle({ row, rowIndex }) { return 'background-color: #F2F6FF;text-align: center;' },cell原创 2020-10-07 15:16:09 · 713 阅读 · 0 评论 -
el-select组件传递对象值
使用el-select组件时,如果不加特别配置,选项里的对象都是蓝色,为选中状态。这时,需要在<el-select>里添加 value=key="id"项 ,然后在option里面的key = id,这样就可以正常传递对象值了如下图:<el-select v-model="selected_item" value-key="id" style="width: 150px;" clearable filterable :loading="loading" > <el-o原创 2020-10-03 12:21:58 · 2331 阅读 · 0 评论 -
echarts图表宽度只有100px
原因是用了el-tab组件导致的,解决方法:var myChart=document.getElementById("#myChart"); //获取元素 //重要:给元素设置宽度myChart.style.width=window.innerWidth+'px';chartObj=echarts.init(myChart); //初始化图表chartObj.setOption(option); //给图表配置设置...原创 2020-10-01 15:31:55 · 984 阅读 · 0 评论 -
vue-element-admin里element-ui分页组件中英文显示切换
在默认设置里,采用的是英文。将src/main.js里的 import locale from 'element-ui/lib/locale/lang/en改成import locale from 'element-ui/lib/locale/lang/zh-CN'就可以了原创 2020-09-29 13:36:31 · 7707 阅读 · 0 评论 -
el-table前端分页和后端分页的实现
【原文链接】 elementUI实现分页前端分页:后台只需将数据返回,不需要做过多处理,前端一次请求拿到所有数据后做分页处理。但数据量不能太大,因为前端是先一次性加载所有数据,然后在做分页处理。在数据量多的情况下,加载相对应的会变慢。所有在前端做分页时要先考虑一下后期的数据量。后端分页:因为是后端分页,前端在每点击一次分页时,便向后台请求一次数据。其实就是避免前端一次性从数据库获取大量数据前端分页tableData.slice((currentPage-1)*PageSize,curren转载 2020-09-28 21:38:28 · 6222 阅读 · 1 评论 -
el-checkboxgroup和v-model的经验总结
在写项目时,获取了数据后想要代码比较简洁,但在各种循环时出现了很多问题。由于获取的数据格式,跟最后需要提交的数据格式不一致,所以一开始打算分为两个数据,一个是负责显示的数据A,另一个是负责绑定的数据B。A负责页面的渲染,B负责最终的提交。这个过程里面,常出现的两个问题,一个是length undefined如下图这个提示的原因一般是数据格式不是数组,所以获取不到length属性另一个是跟上面长得很像 property 'xxx' of undefined,这个是因为对象里没有'xxx'这个属性所原创 2020-09-25 21:12:25 · 3869 阅读 · 1 评论 -
elementui里Table常见坑
转载于“手摸手,带你用vue撸后台 系列三(实战篇)” 链接通过dialog来编辑,新建,删除table的元素这种业务场景相对于前面说的两种更加的常见。而且也有不少的小坑。首先我们要明确一个点 vue 是一个MVVM框架,我们传统写代码是命令式编程,拿到table这个dom之后就是命令式对dom增删改。而我们现在用声明式编程,只用关注data的变化就好了,所以我们这里的增删改都是基于list这个数组来的。这里我们还要明确一点vue 列表渲染注意事项由于 JavaScript 的限制, Vue 不能检测转载 2020-09-06 14:45:22 · 490 阅读 · 0 评论 -
Vue里用el-image加载本地图片失败(Failed)
在使用el-image组件加载本地图片(src/assets/logo/logo.png)时,总是提示Failed,图片显示不出来。搜索后得知,要在路径前使用require加载所以将引用路径改为下面截图后,就可以正常显示了注意:引用过程中单双引号的配对...原创 2020-08-31 23:59:09 · 5814 阅读 · 4 评论 -
ElementUI里Table和Pagination组件的组合形成翻页
其他都没什么问题,这里主要是记录一下,如何使用。1、设一个totalpages,发送一次不带参数的get请求,获取数据所有条目数,并将其与Pagination里的total绑定;2、设置size-page和current-page时,将参数分别传给_limit和_page,之后发起get请求,就能获得请求的当前页数据;3、因为第一步骤,所以显示的页数会一直是总数的数量,就能正常使用了。...原创 2020-05-10 14:19:35 · 225 阅读 · 0 评论 -
在Dialog组件里引用不到ref属性
在做一个点击编辑数据栏,然后弹出Dialog框,显示两个input,在其中placeholder是之前的值想到用ref引用元素赋值,但总是提示ref元素undefined。搜索过后得以解决用$nextTick,这个的功能就是等所有的DOM元素节点都渲染完成以后才执行其里面的方法,不然获取不到Dialog里面元素的ref值如上图,就能解决Dialog里面引用ref的问题...原创 2020-01-29 09:49:56 · 1631 阅读 · 0 评论 -
icon元素上事件的绑定与解绑
使用了一个Element UI中tree控件,tree里用icon元素增加了新增、编辑、删除功能,但在第一次新增还没有完成输入前,又可以继续点击其他的新增,这样的用户体验一点也不好。使用获取元素,再用 元素.onclick = " ",这样并不起作用。因为icon是以伪元素的形式存在的,这样是无法获取事件的。研究了一下发现,元素本身:pointer-events: none;禁用点击事件...原创 2020-01-28 17:50:41 · 887 阅读 · 0 评论 -
el-container布局不正常
按照官方文档直接复制过来,发现head和aside、main、foot在同一行问题排查查了下官网的文档,发现这样一项说明分析原因是:将head、aside、main、foot封装成了独立组件,封装成组件后,el-container中没有了el-footer和el-header,导致子元素排列方向默认为horizontal问题解决在el-container上增加 direction="v...原创 2020-01-28 17:49:44 · 1230 阅读 · 0 评论 -
使用Dialog/Tooltip组件时,不能正常显示
在表格里最后一列加入了“操作”列,打算在其中添加一个“详情”,单击后,弹出一个框来显示内容详细信息。但不论是Dialog,还是Tooltip都出现一个问题,弹出来黑色的一片,却没有内容,如下图:搜索后,找到两个办法来解决:方法一:取消 el-table-column中的 fixed=“right”方法二:在Dialog中加入属性 :append-to-body =“true”在ap...原创 2020-01-28 17:49:10 · 1315 阅读 · 1 评论 -
用Message功能遇到提示框内为空
在做会员消费功能时,用了判断操作。在“取消操作”时用了this.message({ message: '操作取消', type: 'warning'})但测试的结果,弹出了消息窗口,但里面的内容为空。搜索过后,发现网上的解决办法,并不是针对我的情况。我用的是全局引用Element UI,不是单功能引用。将代码再次重新输入一遍后,发现问题解决了。可能是一个bug,记录下来。...原创 2020-01-28 17:41:29 · 1106 阅读 · 0 评论