我家老板是小仙女-CSDN博客

原创利用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">  {{ 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

weixin_48142432的博客