- 博客(37)
- 资源 (4)
- 收藏
- 关注
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 element-ui table 表格组件实现剪切列效果
效果如下:操作后效果:1、HTML代码:<template> <div class="conter"> <!-- 筛选列选项 --> <div class="filter-container"> <el-checkbox-group v-model="formThead"> ...
2019-04-30 11:15:36
3357
10
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 vue引入百度地图 地图控件和绘图工具(电子围栏)
一、参考文档1、官方文档:http://lbsyun.baidu.com/index.php?title=jspopular/guide/show2、百度地图JavaScript API v2.0类参考:(方法很细)http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a6b0二、代码:1、HTML代码<...
2019-04-19 14:00:21
8873
7
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 vue引入高德地图--鱼骨图、地图类型切换、鼠标绘制工具
高德api文档地址:https://lbs.amap.com/demo-center/js-api1、创建地图<div id="container"></div>mounted(){ this.initMap()},methods:{ initMap(){ let map = new AMap.Map('container', { res...
2019-04-19 10:22:49
4002
3
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 z-tree 菜单名称过长以省略号显示,鼠标划过显示全部
1、正常后台传给前台的数据格式如下:var nodes = [{id:1, pId:0, name: “父节点1”},{id:11, pId:1, name: “子节点1”},{id:12, pId:1, name: “子节点2”}];2、需要后台多传递一个参数var nodes = [{id:1, pId:0, name: “父节点1…”,title: “父节点155555555...
2019-03-25 16:52:16
1353
2
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 Vue中使用z-tree插件 —— 点击展开事件异步加载子节点
在vue中使用z-tree插件,执行异步加载时候,API文档提示必须写上。async: { enable: true, url: "nodes.php", autoParam: ["id", "name"] }琢磨了好久,写出来的。首先,要弄清楚这两个事件的方法:1、节点展开(点击前面那个‘+’号或双击节点)onExpand:节点展开的事件回调函数2、
2018-12-27 11:11:00
4537
4
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 手机端局部滚动问题 overflow-y:auto|scroll无效的解决办法
手机端局部滚动问题 overflow-y:auto|scroll无效,使用iscroll解决,发现部分安卓手机还是不支持。最终,使用的Swiper插件,模拟局部滚动效果实现的,比isscroll好用。(测试的时候,需要把应用软件卸载,重新安装一遍就可以了。)代码如下:<div class="big_box"> <div class="swiper-containe...
2018-12-25 14:29:34
20064
原创 表格封装-某列可加链接、某列根据状态码变色
表格封装-某列可加链接、某列根据状态码变色<template> <div> <el-table stripe :header-cell-style="{background: '#EDF1F5'}" :data='tableData' @selection-change="handleSelectionChange" > <!--多选列--> <el-tab
2021-07-26 17:58:55
151
原创 element-ui 如何把表格的操作封装成可配置项来使用
效果如下:表格的操作列变成可配置项给每个操作列按钮添加方法,加图标,可以根据状态控制按钮的显示、隐藏1、新建一个table.vue组件请参考 element el-table的封装以及使用<template> <div> <el-table :data='tableData'> <!--多选列--> ...
2020-01-21 11:02:12
819
原创 vue tags-input组件封装
1、新建一个tagsInput.vue组件代码如下:<template> <div class="tags_input"> <el-tag v-for="(tag,index) in list" :key="index" closable :di...
2020-01-21 10:31:30
2517
5
原创 vue 怎么把自己的组件打包和下载使用
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...
2020-01-20 15:53:16
2145
原创 element el-table的封装以及使用
1、封装table.vue组件<template> <div> <el-table :data='tableData'> <!--多选列--> <el-table-column v-if='selectionShow' ...
2020-01-17 15:01:27
2953
1
原创 大小写转换+全角转半角+清除空格+仅数字+仅字母+仅字母和数字 方法汇总
大小写转换1、转小写方法var value = 'ABC'value.toLowerCase() console.log(value) // abc2、转大写方法var value = 'abc'value.toUpperCase()console.log(value) // ABC全角转半角fullToHalf(val) { let retV...
2020-01-16 14:07:00
383
转载 教你自己创建一个Vue的UI组件库类似Element
**网上看到了这篇文章 非常的棒哈**前言随着前端的三大框架的出现,组件化的思想越来越流行,出现许多组件库.它能够帮助开发者节省时间提高效率,如React的Ant-design,Vue的iView,Element等,它们的功能已经很完善了.我写这遍文章的目的:记录自己搭建UI库的过程(对Vue的理解加深了好多)演示地址首先讲一下思路:平常写组件时,写一个组件要用时直接导入就行了,...
2019-11-06 14:44:04
1548
1
转载 input 输入框 只能输入数字、字母、汉字等
1.文本框只能输入数字代码(小数点也不能输入)<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"><br><br>2.只能输入数字,能输小数点.<input onkeyup="...
2019-08-06 16:30:51
292
转载 vue 设置和获取cookie
写法1:methods: { //设置cookie setCookie: function (cname, cvalue, exdays) { var d = new Date(); d.setTime(d.getTime() +...
2019-07-29 14:37:36
2623
转载 js 前端数据多条件筛选过滤
最近在用vue做一个后台管理项目,因为vue2.0删除了内置的过滤器,无法再像1.0版本或者angularJs那样直接使用内置的过滤器实现数据的多条件筛选过滤。因此自己写了一个方法来实现这种功能。//假设后端通过接口给我们的数据如下:let data = [ { name: 'Andy', age: 13 }, { name: 'Jack...
2019-05-15 17:15:38
3108
转载 element ui 表格动态生成多级表头,可无限嵌套
效果图官网的写法是el-table-column下面嵌套el-table-column,如下:<template> <el-table :data="tableData3" style="width: 100%"> <el-table-column prop="date" label="日期" wi...
2019-05-06 15:15:36
2616
转载 vue 在一个元素上同时绑定单击和双击事件
在做项目过程中,需求是点击孔位单击弹出对话框查看产品总数,双击弹出对话框查看详情。一开始直接click和dblclick写在标签里面,但是不管怎么样,总是执行单击事件解决办法:利用计时器,在大概时间模拟双击事件这里以table 单元格事件为列子:<el-table :data="tableData" @cell-dblclick="doubleCli...
2019-05-06 14:13:27
5125
转载 vue 专题 vue2.0各大前端移动端ui框架组件展示
转载:https://www.cnblogs.com/maqingyuan/p/9737236.htmlvue 专题 vue2.0各大前端移动端ui框架组件展示Vue 专题一个数据驱动的组件,为现代化的 Web 界面而生。具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用请访问链接:https://www.awesomes.cn/subj...
2019-05-05 15:26:56
1965
转载 element-ui table 表格组件实现可拖拽效果(行、列)
效果如下:1、首先,需要执行npm install sortablejs --save-dev 安装sortable.js2、在页面内引入<template> <div style="width:800px"> <el-table :data="tableData" border row-key="id" a...
2019-04-30 10:59:48
29745
20
转载 ztree树只允许兄弟节点之间拖拽
重点:setting.callback.beforeDrop 返回 false,zTree 将恢复被拖拽的节点。思路:利用该特性,可以在 beforeDrop 具体实现中判断是否在兄弟节点间拖拽。//zTree配置var setting = { edit: { enable: true, showRemoveBtn: false, sh...
2019-03-26 16:12:56
634
转载 如何在VUE框架中使用ztree插件
一切还是以需求为导向!如下图所示:这是要求作出的效果。经过我综合考虑发现ztree插件与需求契合度比较高,所以果断的使用了该插件进行开发。简单说下需求:管理目录层级有四个子菜单,可以新建父目录和子目录以及对目录进行相关编辑操作。相信大家遇到的第一个问题就是如何使用ztree插件,没错!那自然要跑到ztree官网去看文档,熟读文档是必不可少的!读完文档后,那怎么在vue框架中配置ztree插件呢?...
2018-12-25 14:01:53
1269
转载 vue中引入jquery
vue中引入jquery2018年03月07日 10:37:19 看淡江湖 阅读数:9631更多个人分类: vue版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hhy1006894859/article/details/794674451、在项目中安装jquery。npm install jquery --save-dev2、在项目根...
2018-12-25 09:41:02
157
转载 手机端局部滚动问题 overflow-y:auto|scroll无效,使用iscroll解决TOC](这里写自定义目录标题)
手机端局部滚动问题 overflow-y:auto|scroll无效,使用iscroll解决TOC](这里写自定义目录标题)var myScroll;function loadedscr() {setTimeout(function () {// 各种参数可以查看相关文档// IScroll默认隐藏了其所包含元素的click/tap事件,所以默认情况下,不管用户不管怎么操作,都不能触发I...
2018-12-20 18:14:21
2345
转载 VUE饿了么树形控件添加增删改功能
转自:https://segmentfault.com/a/1190000011574698#articleHeader2element-ui树形控件:地址在原文档中有个案例是有新增和删除功能,但是后来发现其修改的数据并不能直接影响到树形数据,所以采用了 render-content 的API重新写了个组件。写个开发的步骤,所以文章比较长emmm2018.07.25更新elementU...
2018-12-11 10:41:08
2348
移动端webapp支持overflow
2018-12-20
著名前端大师ppk谈javascript
2018-12-10
荷兰前端大师ppk移动web手册完整版
2018-12-10
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人