随笔分类 -  elementUI

elementUI
vue-amap安装和使用
摘要：之前分享了异步加载高德地图api的用法，现在记录一下vue-amap的用法。 vue-amap 是饿了么开源的一套基于 Vue 2.0 和高德地图的地图组件。 数据状态与地图状态单向绑定，开发者无需关心地图的具体操作。 官方文档：https://elemefe.github.io/vue-amap/ 阅读全文
posted @ 2020-09-08 11:13 Lena_叶 阅读(20373) 评论(46) 推荐(0)
项目中的部门使用级联选择器，编辑时初始化选中部门解决方案
摘要：最近遇到一个比较难的问题，新增一个人员的信息，其中有部门的选择，因为部门有层级关系，使用的是级联选择器，且只保存了部门名称到数据库，在编辑人员信息的时候，需要回显选中部门。问题有点棘手，且每层结构一致，我选择用递归的方式实现。 部门结构如图，有一个根部门，其下有子部门，子部门下还有子部门： 问题有点 阅读全文
posted @ 2019-11-20 17:47 Lena_叶 阅读(1021) 评论(0) 推荐(0)
vue实现滑块滑动校验
摘要：为了防止机器操作自动提交，我们需要添加滑动校验。 实现代码如下： 1.子组件slider.vue <template> <div class="drag" ref="dragDiv"> <div class="drag_bg"></div> <div class="drag_text">{{conf 阅读全文
posted @ 2019-02-16 17:05 Lena_叶 阅读(3281) 评论(0) 推荐(0)
阿里云OSS上传文件demo
摘要：1、安装ali-oss 2、demo 此例中使用到了ElementUI的el-upload组件。因为样式为自定义的 所以没有用element的自动上传的属性，这里配置根据项目需求，需要自定义，可以按照以下配置： http-request：覆盖默认的上传行为，可以自定义上传的实现； show-file 阅读全文
posted @ 2019-01-31 17:32 Lena_叶 阅读(1515) 评论(0) 推荐(0)
vue+ElementUI+高德API地址模糊搜索（自定义UI组件）
摘要：开发环境描述： Vue.js ElementUI 高德地图API 需求描述： 在新增地址信息的时候，我们需要根据input输入的关键字调用地图的输入提示API，获取到返回的数据，并根据这些数据生成下拉列表，选择某一个即获取当前的地址相关信息（包括位置名称、经纬度、街区、城市、id等信息）。 如果不用 阅读全文
posted @ 2018-12-07 17:08 Lena_叶 阅读(11557) 评论(14) 推荐(1)
element-ui日期筛选:选择日期即触发查询
摘要：需求：日期范围选择器，当选择好一个日期范围时，立即触发查询功能 js代码： 阅读全文
posted @ 2018-11-19 19:21 Lena_叶 阅读(12435) 评论(7) 推荐(0)
axios + vue导出excel文件
摘要：（使用到了elementUI框架） api/api_dispatch.js: api/index.js:（省略了其他的GET、POST等方法） 阅读全文
posted @ 2018-10-09 10:40 Lena_叶 阅读(11936) 评论(6) 推荐(1)
ElementUI动态表格数据转换formatter
摘要：elementUI的表格初始化比较简单，声明prop值对应的字段名即可。 而在实际应用中，我们常常有这种需求：从服务器获取的数据并不是我们要显示的最终结果，涉及一些状态、类型、日期时间等的转换，这时候我们就需要用elementUI表格组件的formatter属性，来进行数据转换了。 以下给出一个例子 阅读全文
posted @ 2018-08-31 10:46 Lena_叶 阅读(49961) 评论(0) 推荐(2)
elementUI图片墙上传
摘要：elementUI提供了照片墙上传的功能，我们直接拿来用。 以下是实现代码： 效果图： 上传之后，我们可能会有编辑的情况，这里附上照片墙编辑时的初始化的代码：（请注意editFiles） 初始化后的效果就是这样： 接下来就可以继续愉快地上传图片啦。 阅读全文
posted @ 2018-08-23 20:04 Lena_叶 阅读(13295) 评论(1) 推荐(3)
高德地图模糊搜索地址（elementUI）
摘要：首先引入AMap： 1、在index.html引入AMap <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=你申请的key&plugin=AMap.Geocoder"></script> <scr 阅读全文
posted @ 2018-08-15 18:20 Lena_叶 阅读(4990) 评论(0) 推荐(0)
elementUI表单验证
摘要：elementUI表单验证非常方便，我们直奔主题： 1、验证表单中的某个字段： 2、验证整个表单：（在提交订单前验证） 3、表单重置： 阅读全文
posted @ 2018-08-15 18:13 Lena_叶 阅读(1435) 评论(0) 推荐(0)
ElementUI对话框（dialog）提取为子组件
摘要：需求：在页面的代码太多，想把弹窗代码提取为子组件，复用也方便。 这里涉及到弹窗el-dialog的一个属性show-close： show-close="false"是设置不显示关闭按钮，因为弹窗显示状态值（:visible.sync）是从父组件传递的参数，如果使用自带的关闭按钮，会报出一个错误： 阅读全文
posted @ 2018-06-05 20:22 Lena_叶 阅读(29000) 评论(5) 推荐(4)
ElementUI+命名视图实现复杂顶部和左侧导航栏
摘要：在了解了命名视图的用途后，发现用命名视图来实现复杂导航更加省力。更多知识请参考这里 这里只说明重要配置内容，其他内容配置请参考上一篇初始版本： ElementUI 复杂顶部和左侧导航栏实现 或参考文末提到的github上的项目代码。 项目目录如下： 1、router配置（router/index.j 阅读全文
posted @ 2018-06-05 17:42 Lena_叶 阅读(27030) 评论(14) 推荐(3)
ElementUI 复杂顶部和左侧导航栏实现
摘要：描述：如图 项目路径如下图所示： 代码实现： 首先在store.js中添加两个状态： App.vue内容： main.js代码： router/index.js文件声明路由： 其中：行程计划、任务、通讯录属于首页大板块（topNavState=“home”）；企业信息、车辆信息、部门信息都属于ent 阅读全文
posted @ 2018-05-04 17:11 Lena_叶 阅读(108952) 评论(9) 推荐(2)
elementUI动态数据表格（带分页）
摘要：index.vue handleSizeChange(val){ this.pageSize = val; this.currentPage = 1; this.fetchData(1, val); // console.log(`每页 ${val} 条`); }, handleCurrentCha 阅读全文
posted @ 2018-04-27 11:20 Lena_叶 阅读(23012) 评论(0) 推荐(0)
Vue2.0+elementUI使用echarts插件
摘要：1、npm安装echarts： $ npm install echarts -S 2、html代码： <template> <div id="chartColumn" style="width: 100%; height: 400px;"> </div> </template> 3. js代码： 3 阅读全文
posted @ 2018-04-27 11:07 Lena_叶 阅读(10356) 评论(2) 推荐(0)