- 博客(19)
- 收藏
- 关注
原创 利用element-ui的表格实现复杂合并单元格之二
<template> <el-table :data="tableList" border :span-method="mergeTable" :row-class-name="setRowClassName" style="width: 100%" > <el-table-column prop="orgName" label="监测主体" align="cen
2022-01-13 17:51:00
1159
原创 金额输入框千分位化&&限制最大值最小值且&&限制小数位
金额千分位化并保留两位小数且限制最大值最小值只适用于最小值小于等于0的情况<template> <div class="input_wrap"> <!-- type="number" --> {{ inputComfig.startAmt }} <el-input class="input" @input="formatMoney('startAmt', $event, { min: 0
2022-01-13 14:08:39
635
原创 element的Cascader 级联选择器的使用及回显
element的Cascader 级联选择器使用element-ui组件库的Cascader 级联选择器,vue项目中经常能用到的一个组件,这次使用的是父子节点不相互关联,也就是可选择到任意一个节点,不需要强制选择到最末的一个节点,真香o( ̄▽ ̄)ブ在使用时候简单讲述下遇到的困难,总感觉自己老遇到奇奇怪怪的问题,一定是我太菜了/(ㄒoㄒ)/~~首先我把这个组件封装了起来,页面使用的地方有点多哈<template> <div class="upload_container"
2021-08-31 11:11:57
3815
原创 多个相邻按钮共用边框切换效果
多个相邻按钮切换效果出现边框重叠问题的解决方法<template> <div style="height: 100%"> <div class="tab-title-box clearfix"> <p data-id="all">集团</p> <p data-id="my">板块</p> <p data-id="my">产业</p> &
2021-08-21 10:08:33
228
原创 wangeditor的使用
wangeditor的使用<template> <div style="width: 100%;height: 500px"> <div class="mo-wang-editor" ref="editor" ></div> </div></template><script> import wangEdit fr
2021-07-05 15:56:56
739
原创 利用notification显示桌面通知
利用notification显示桌面通知代码如下:<template> <div class="app-container"> <h1>Notification</h1> <el-input v-model="value" style="width:300px;margin-right:20px;" /> <el-bu
2021-07-05 09:31:51
230
原创 vueCropper之头像剪切上传
vueCropper之头像剪切上传献上图片+代码:<template> <div class="app-container"> <div class="image-list"> <div class="source-image"> <vueCropper ref="cropper"
2021-07-02 11:45:13
200
原创 echart之堆叠柱状图自定义tooltip内容兼tooltip悬浮位置调整
echart之堆叠柱状图自定义tooltip内容兼tooltip悬浮位置调整由于业务要求如下:(1)排序:根据柱状组成结构,从上到下保持一致,银票-电票-白名单、银票-电票-灰名单、商票-外部商票、商票-T票通(2)标签:根据柱状组成结构,从左到右,银票-电票-白名单、银票-电票-灰名单、商票-外部商票、商票-T票通然而echart堆叠柱状图的渲染机制是柱状图从下往上的,所以第一条数据是排在最底层的,即银票-电票-白名单是第一条数据,所以排在最底下了,那么把数据反过来不就行了吗,没错,你真聪明,但是
2021-07-02 08:54:21
5828
3
转载 element-ui对话框可拖拽及边界处理
转自苍青浪的博客园:https://www.cnblogs.com/cangqinglang/p/11115365.htmlelement-ui对话框可拖拽及边界处理应业务需求,需要实现对话框可拖拽问题,应element-ui没有提供官方支持,于是便参考大神的文章,得出了适合业务需要的解决方案。很多大神给出的代码是没有解决边界问题的,但是不解决边界问题存在一个bug,拖到不可视区域后边再也拖不回来了,不信你们可以试试。在实现的功能的情况下,封装成了js文件,然后再main.js中引入后可全局使用。功
2021-06-24 15:16:13
321
原创 element ui 选择器右侧icon居中调整
element ui 选择器el-select高度变化的右侧icon调整写后台管理系统项目的时候,经常会遇到下拉框,且下拉框高度一般都会做调整,但是调整高度以后的下拉框发现右侧箭头不居中了,下面来讲下解决办法// input的宽高::v-deep .el-input__inner { height: 32px!important;}::v-deep .el-input--suffix .el-input__inner { width: 100% !important;}//调整右
2021-04-26 11:07:32
5098
原创 vue项目之手写loading组件
loading组件这是loading的效果。。。直接上代码吧<template> <div class="v-spinner" v-show="loading"> <div class="v-dot-container"> <div class="v-dot v-dot1" v-bind:style="spinnerBasicStyle"> <div class="v-dot v-dot2" v-bind:
2021-04-23 09:51:23
326
原创 水波纹按钮
水波纹按钮水波纹按钮大概就是这么个样子,主要是通过样式达到这样子的效果在src下新建在directive文件夹,directive文件夹新建的文件如下:wave.css.waves-ripple { position: absolute; border-radius: 100%; background-color: rgba(0, 0, 0, 0.15); background-clip: padding-box; pointer-events
2021-03-30 11:00:42
358
原创 结合element的dialog实现可拖动Dialog
实现可拖动的弹窗效果如下图所示:在src下新建directive文件夹,directive文件夹新建el-drag-dialog文件夹,如下图在el-drag-dialog文件夹新建index.jsimport drag from './drag'const install = function(Vue) { Vue.directive('el-drag-dialog', drag)}if (window.Vue) { window['el-drag-dialog'
2021-03-29 17:36:42
356
原创 vue之下载功能
vue之下载功能首先在utils文件夹中新建一个js文件import axios from 'axios'import Cookies from 'js-cookie'const baseUrl = "http://10.0.17.53:8080/cmas"const service = axios.create({ baseURL: baseUrl, timeout: 300000})let token = JSON.parse(localStorage.getIte
2021-03-29 14:45:30
294
原创 结合element-ui实现上传功能
结合element-ui实现上传功能直接上代码吧<template> <el-form :model="uploadForm" onsubmit="return false"> <el-form-item label=""> <el-upload ref="uploadForm" action="" :file-list="fileList" :on-change="han
2021-03-29 11:50:25
224
原创 自动导入store下module所有js文件
自动导入store下module所有js文件相信大家都知道store模块化吧,平时我们需要将每个模块,permission.js,tagsView.js和user.js一个一个import到index.jsimport Vue from 'vue'import Vuex from 'vuex'// 导入模块import permission from './modules/permission'import tagsView from './modules/tagsView'import
2021-03-29 10:51:25
987
原创 利用element-ui的表格实现复杂合并单元格
利用element-ui的表格实现复杂合并单元格话不多说,先呈效果图首先我们得先了解下请求回来的数据是否和我一致哦,不一致的话可能文章就对你没啥用啦,以下是请求回来的数据(数据有点多哈,主要让你们看看数据格式是否和我一样)"list":[{"rowNum":null,"industry":"SCBC","custCode":"001421","custname":"深圳软件科技有限公司","draftType":"1","draftTypeName":"银票-电票","lastBal
2021-03-29 10:36:40
1545
3
原创 首字母大写函数&数字格式化函数
首字母大写函数&数字格式化函数1.首字母大写/** * 首字母大写 * @param {String} string */export function uppercaseFirst(string) { return string.charAt(0).toUpperCase() + string.slice(1)}实现效果如下:2.数字格式化/** * 10000 => "10,000" * @param {number} num */export func
2021-03-29 09:30:04
880
原创 过滤两个对象数组相同元素
过滤两个对象数组相同元素let arr = [{id: 1, name: 'AAA'}, {id: 2, name: 'BBB'}, {id: 3, name: 'CCC'}, {id: 4, name: 'DDD'}]let arr2 = [{id: 2, name: 'BBB'}, {id: 3, name: 'CCC'}]let newArr = []arr2.forEach(item => { newArr.push(item.id) }) for (let id of
2021-03-10 20:56:28
1419
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人