![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
Ace_with_Yu
这个作者很懒,什么都没留下…
展开
-
iview中Select 选择器多选校验
iview提供的select组件中使用multiple属性可以开启多选模式,返回的数据也是数组的形式。iview使用的校验是根据async-validator来实现数据验证。验证规则可前去查看开源项目多选模式下的select组件校验使用type为array,可设置len属性来规定数组的长度,设置len:1则不是数组长度为1则通过校验,不设置则数组有元素则通过校验。{ type: 'array', ...原创 2018-02-08 17:24:31 · 8793 阅读 · 1 评论 -
el-table使用模板插槽无法显示tooltip 以及 text-overflow:ellipsis 在火狐显示的问题
el-table中使用show-overflow-tooltip属性内容过长被隐藏时显示 tooltip,使用了作用域插槽的模板那么show-overflow-tooltip设置的显示tooltip内容只作用到下一级的div内容使用<template slot-scope="scope">后 需要在 将内容显示tooltip上的标签设置overflow:hidden;text-o...原创 2019-07-05 16:13:17 · 2623 阅读 · 3 评论 -
el-input中对输入进行过滤内容
在项目中有时候要对用户的输入内容进行过滤,而不是做校验。<el-input v-model="input" @input="e => input = inputMe(e)" placeholder="请输入内容"></el-input>使用@input对用户输入进行监控inputMe(e){ return e.replace(/\/...原创 2019-06-28 18:14:49 · 5893 阅读 · 0 评论 -
在vue项目新增loading
有时候在elementui项目中一个Loading并不满足需求。所以要额外增加其他的Loading来展示1 在App.vue中是增加一个transition标签用来过渡<transition name="load"> <div v-if="loadShow" class="load"> <img src="/static/images...原创 2019-06-03 19:35:59 · 583 阅读 · 0 评论 -
Cascader 级联选择器 出现空面板的问题
出现空白面板是因为后台大佬数据是递归处理过,最底层的children是个空数组,后台大佬又去不掉或者做不了处理,说特麻烦,那前端做下就好了。获取数据的时候 前端将数据做个递归处理,遇到children为空的时候赋值undefined,就可以解决这个问题。处理后界面...原创 2019-04-11 17:20:17 · 2811 阅读 · 1 评论 -
表单编辑,关闭对话框 提醒用户是否保存数据
在对话框中填写表单,防止未提交的数据用户误操作,点击关闭造成填写的大量数据信息清空,需要重新操作一遍,因此关闭的时候对填写有数据的表单,进行提醒。点击打开对话框的时候,将数据保存在sessionStorage,不能保存在data中定义的一个对象中,这样子修改表单的值会对开始点击打开对话框时候保存的值进行修改,从而无法判断用户是否修改了表单。同时,el-dialog显示右上角的关闭...原创 2018-12-18 20:00:16 · 2305 阅读 · 3 评论 -
Cascader 级联选择器 初显的一些问题
使用级联选择器的时候只显示最末端的一级,而且后台也只需要传递一个id而不是数组的形式,所以级联选择器初始显示数据时候要进行异步处理。数据初始化的时候对options里的数据进行遍历,寻找显示的id所在的层级,定义一个数组,将所在的层级上的父级们的push进数组里,注意先后顺序,显示的id在最后。数据作为表单提交的时候,一般后台需要的都是最后一层的id,提交的是一个字符串或者nu...原创 2018-12-27 17:29:12 · 3650 阅读 · 0 评论 -
vue-amap 高德地图定位 点击获取经纬度和具体地址的使用
官方文档地址: 点这里!! 经纬度获取只要通过点击事件就可以通过e.lnglat来获取,然后就是插件Geocoder使用了。在main.js中initAMapApiLoader中写入:AMap.Geocoder,注意 官方文档中有提示:所以插件中使用的依然是AMap,与导入名无关不然会报错,Geocoder无法使用。定位文档 照着文档写就行 注意在main.js中注...原创 2018-12-07 10:50:35 · 19196 阅读 · 0 评论 -
用户角色- 权限选择 树形表格+选择框 三级菜单
之前弄了个用户角色权限的表格,但是后面 又增加了一个需要三级的新需求,*******,所以对组件进行了新的修改界面完整如下这是搭建的demo 设备管理下有设备1设备2两个模块设备1拥有增删改的权限,设备2下拥有两个模块设备2-1设备2-2 都拥有相应的模块,相应的数据格式如下; treeData:[ { ...原创 2018-12-14 12:40:01 · 2220 阅读 · 2 评论 -
表格的整列复制,对数据批量修改
最近的项目上有个需求是将一个表格中的input数据修改了某一个值,该列之后的值修改修改为一样,从而多对数据的批量编辑 正常来做是通过点击事件cell-click点击来确定在那一列的column和id,然后对数据进行遍历修改即可。但是这样会有个bug,表单可以不用通过点击就可以对input里的数据进行改变,这样子表格就监测不到点击的是哪里,所以还需要在每个input中加上chan...原创 2018-12-06 17:35:00 · 2178 阅读 · 0 评论 -
高德地图 vue-amap 在点坐标上方显示该点的信息
如图:在坐标点上方显示该点的一些信息,使用el-amap-text组件,该组件需要位于el-amap-marker之下,在maker属性中增加text和offsettext是显示的文字,offset是调整文本框出现位置的偏移量...原创 2018-11-26 11:26:57 · 8077 阅读 · 4 评论 -
用户角色- 权限选择 树形表格+选择框
在最近的项目有个功能是给用户角色相关的模块赋予增删改查的权限原型大体如下这是产品一开始给的原型,但是每个模块所拥有的权限不一样,不一定四个都会有,或者会有别的权限,网上找寻资料后,根据这个项目进行修改的https://github.com/Echo987/vue-tableAuthor,而作者也是根据花裤衩的树形表格进行的修改 项目的效果是这样子根据项目的需求对这个表格进行了一点修...原创 2018-11-12 17:29:02 · 2484 阅读 · 1 评论 -
vue中使用高德地图 信息窗口样式无法修改
vue中使用vue-amap后在main.js中import VueAMap from 'vue-amap' 不使用AMap避免与高德全局变量冲突。 在页面中对信息窗体进行样式修改 如果设置了style中设置了scoped会无法起作用,需要去掉scoped或者在app.vue中进行样式的修改...原创 2018-10-15 20:18:29 · 3386 阅读 · 5 评论 -
表单输入字符串直接转换数字 v-model 的修饰符
.numbervue提供了一个修饰符--v-model.number 在表单输入的时候直接将字符串转换成数字类型 很是方便<el-input type="text" v-model.number="ruleForm.payMoney" placeholder="请输入缴费金额"></el-input>在elment-ui中做表单检验的时候,直接在校验里设定...原创 2018-09-30 10:10:00 · 6744 阅读 · 0 评论 -
vue中导出excel表格
在vue的项目中有个导出excel的需求 之前是后台做的给个地址进行下载。查阅了下资料,前端实现也不难,记录下来,备用。1 安装依赖 npm install -S file-saver xlsxnpm install -D script-loader2 安放两个js文件在src下新建一个文件夹引入Blob.js和expor2Excal.js3 在methods中写导...原创 2018-09-27 20:32:21 · 815 阅读 · 1 评论 -
在vue中封装echarts折线图组件
先来张图要实现在父组件引用子组件图表,父组件需要传递给图表组件几个数据,id: 图表实例化需要一个唯一的id;time: x轴的显示数据,参数名可以自己定义;opData: 用来配置series的系列列表,参数可以自己定义;unit: y轴单位显示,参数可以自己定义;title: 图表系列标记,参数可以自己定义;父组件:然后封装的子组件如下:需...原创 2018-07-28 10:24:04 · 7086 阅读 · 5 评论 -
使用Dialog时 让页面层使用了 JQ插件mCustomScrollbar滚动条固定
JQ插件mCustomScrollbar是让不同浏览器的滚动条样式能同一。当有使用Dialog的时候页面内某些div区域内 使用到了滚动条 那么Dialog内使用到鼠标滚轮的时候就会和页面的滚动条冲突。上图这种使用到了vue-cropper裁剪功能,当用户上传图片上来裁剪的时候,鼠标滚轮可以对图片进行缩放,但是页面层使用了mCustomScrollbar插件 会跟着滚动 体验很不好。...原创 2019-07-23 16:21:06 · 379 阅读 · 0 评论