- 博客(37)
- 收藏
- 关注
RSS订阅原创 vue3项目报错Module ‘“../../../../node_modules/vue/dist/vue“‘ has no exported member ‘ref ‘
Module '"../../../../node_modules/vue/dist/vue"' has no exported member 'ref '
2022-12-20 18:14:42
3182
1
原创 文件报错：Delete `␍`eslint(prettier/prettier)
Delete `␍`eslint(prettier/prettier)
2022-12-19 13:48:55
340
原创 TypeError: Router.use() requires a middleware function but got a Object报错解决
1.在运行nodejs-mongodb项目时，项目报错TypeError: Router.use() requires a middleware function but got a Object2.解决办法我发现在写路由的同时忘记了导出即可解决
2022-01-13 14:21:25
1175
1
原创 Module build failed (from ./node_modules/babel-loader/lib/index.js) 错误解决
运行项目时报错Module build failed (from ./node_modules/babel-loader/lib/index.js)解决方案：控制台输入 npm install @babel/core @babel/preset-env即可解决
2022-01-13 14:17:15
4805
原创 基于node.js+MongoDB+elementui的分页功能更新优化
一、准备分页组件。1.1分页组件src-->components-->Pagination-->index.vue<template> <div class="pagination-container"> <el-pagination @current-change="paginationObj.handleCurrentChange" @size-change="paginationObj.handleS
2022-01-12 11:55:18
422
原创 基于node.js+MongoDB+elementui的分页接口以及页面实现
1.在准备分页之前，先搭好分页的组件。这里我已经提前实现了对elementui中分页组件的二次封装，如果想参考分页组件二次封装，详情请看如下链接ElementUI分页组件的封装_mingY的博客-CSDN博客2.准备好分页组件，可以看见如下样式：这里我已经使用elementui的全局样式对分页组件样式进行处理3.我使用的是mlab下面的mongo...
2022-01-10 15:01:23
727
原创 ERROR Invalid options in vue.config.js: “baseUrl“ is not allowed
我的vue版本@vue/cli 4.5.15在vue-cli.3.3版本后 baseUrl被废除了，因此这边要写成 publicPath。
2021-12-31 14:11:42
789
原创 ElementUI如何将当前组件的所有属性快速传递给子组件
1.普通写法，对应的是一个一个元素的绑定<el-table border style="width='300px'" :data='tableData'> <el-table-column v-for="col in columns" :prop="col.prop" :key="col.prop" :label="col.label" :width="col.width">
2021-12-28 11:54:24
860
原创 ElementUI在el-table基础上进行导出.xls表格操作
1.截图2.导出按钮<el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>3.导出方法this.downloadFile为全局挂载的方法/** 导出按钮操作 */ handleExport() { // 导出接口 exportHealthSubsidy(this.ids) .
2021-12-27 20:23:23
643
原创 ElementUI分页组件的封装
1.准备封装创建index.vue路径：src-->components-->Pagination-->index.vue<template> <div :class="{'hidden':hidden}" class="pagination-container"> <el-pagination :background="background" :current-page.sync="currentPage"
2021-12-27 19:25:31
235
原创 ElementUI中实现表单刷新重置，保存在全局方法中
elementUI中的resetFields方法1.在el-form添加属性在el-form中定义ref属性queryForm<el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">2.刷新重置方法刷新按钮：<el-button icon="el-icon-refresh" size="mini" @click="handleRefresh">刷新.
2021-12-27 10:48:11
2878
原创 el-table中的:label使用变量换行
1.效果2.实现代码 <el-table-column prop="cprateDeposit" :label="'对公存款\n(万元)'" align="center"> </el-table-column>3.解析使用:label，并且使用\n换行；其中align 是使文字居中
2021-10-25 09:11:59
338
原创 vue项目使用npm run dev 编译到一半不动了
发现是因为自己在写setTimeout定时器时，其自动导入了import { setTimeout } from 'timers'; 导致编译卡住，删除后编译正常。如果你不是这个错误，可能是代码其他位置有比较明显的报错导致的，可以检查一下代码的报错。...
2021-10-21 19:03:47
1891
原创 echarts 环形图 默认高亮展示某个数据
环形图默认高亮显示数据代码：data(){ return { chart:null, }},methods: { initChart() { this.chart = this.$echarts.init(document.getElementById(this.id)) this.chart.setOption({ color: color, }) this.getDefaultS..
2021-10-21 18:59:24
1229
原创 echarts格式化tooltip数据
1.效果将数据每隔三个数字用逗号分隔2.实现代码tooltip: { trigger: "axis", backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。 textStyle: { // 提示框浮层的文本样式。 color: "#fff", fontStyle: "normal", ..
2021-10-21 09:04:37
1339
原创 echarts解决自适应图表被压缩问题
在当我们将浏览器的窗口缩小时，图表也会跟着缩小；但当我们将浏览器窗口还原放大时，发现图表并没有跟着返回原来的大小，会出现压缩的情况。这时我们应该实现自适应。 mounted() { this.initChart(); let self = this; window.onresize = function(){ if(self.chart){ self.chart.resize() } }; },me.
2021-10-20 19:25:29
2353
原创 Vue修改默认字体
1.在assets文件夹下创建文件夹，命名为font2.在font文件夹中新建文件：font.css@font-face { font-family: "pingFangSC-Medium"; src: url("./PingFangMedium_0.ttf"); font-weight: normal; font-style: normal;}3.下载字体包4.App.vue文件中使用<style rel="stylesheet/...
2021-10-18 16:09:20
2928
原创 vue获取当前日期和时间并进行格式化
1.样式：2.思路：这里我用的是用elementui框架搭的结构，其中图标icon采用的是插槽。prefix：指的是插在前面suffix：指的是插在后面 <span class="currentDate"> <span slot="prefix" class="el-icon-timer"></span> {{dateFormat(date)}} </span>css样式：
2021-09-30 11:17:14
13213
原创 echarts实现给图例添加单位、百分比，以及图例文字过长显示省略号
修改lengendformatter: (name) => { if (this.seriesData.length) { let sum = 0; this.seriesData.forEach((item) =>{ sum += parseFloat(item.value) }) const item = this.seriesData.filter((item) => it
2021-09-29 14:56:24
1455
2
原创 vue改变页面顶部浏览器标题栏图标
1.准备一个 .ico文件 别的图片格式也可以转成.ico格式可自行百度搜索icon图标生成器2.比如我修改的是favicon.ico 。这个文件是保存在public文件夹下，将准备好的.ico文件替换即可3.改变index.html文件（也是在public文件夹下）<link rel="icon" href="<%= BASE_URL %>favicon.ico">4.最终样式...
2021-09-29 14:42:12
489
原创 异步编程Promise、Generator和Async
在JavaScript的世界里，对于异步编程存在如下几种方案：1.回调函数；2.事件触发监听；3.发布订阅者模式；4.Promise。首先介绍Promise，然后介绍ES6提供的生成器函数，async函数。1.Promise来源于社区，代表一个对象，它代表异步操作未来的一个结果（承诺）。它总共有三个状态，pending \ fulfilled \ rejected。另外，它的状态翻转路径只有两个：pending -> fulfilled or pending -> r
2021-09-22 15:15:35
190
原创 link 和 @import 的区别
1.引入的内容不同：link 除了引用样式文件，还可以引用图片等资源文件，而 @import 只引用样式文件2.加载顺序不同link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载3.兼容性不同link 是 XHTML 标签，无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏览器不支持4.对JS的支持不同link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持...
2021-09-22 14:28:56
58
原创 ElementUI中分页Pagination 样式的修改（分页组件的封装）
1.实现效果：2.实现代码：<template> <div :class="{'hidden':hidden}" class="pagination-container"> <el-pagination :background="background" :current-page.sync="currentPage" :page-size.sync="pageSize" :layout="layout"
2021-09-17 17:42:48
1623
原创 在ElementUI中改变el-table中的el-table-column样式
1.效果一览2.实现思想：使用作用域插槽：slot-scope="scope"；绑定class类'back'；v-if条件判断：如果scope.row.xh == 1,2,3 ,则给他绑定类，设置样式。不满足条件的则不绑定类，不设置样式。3.实现代码：html代码：<el-table-column prop="xh" label="序号" width="80" align="center"> <template slot-scope="...
2021-09-17 16:25:40
1941
原创 Echarts实现环形图的渐变颜色效果
已经封装好的环形图组件直接在要用的vue文件中引用： <circleChart :id="chart4.id" :width="chart4.width" :height="chart4.height" :bgColor="chart4.bgColor" :circleData="chart4.cir...
2021-09-13 17:58:42
4352
原创 ElementUI改变el-table的表头颜色以及各行的颜色
1.实现效果2.实现代码<el-table :data="tableData" :header-cell-style="{ background: '#E5E9F4' }" :cell-style="{ color: '#5e708e' }">其中:header-cell-style="{ background: '#E5E9F4' }".
2021-09-09 18:05:30
2138
原创 Echarts地图添加自定义图标
1.准备图片2.代码：var mapDate = [ { name: '房山区', value: [116.13, 39.75, 29999], img:'image://./map-未选中.png' }]3.解析其中value的前两个参数分别是经纬度这段代码可以分为两个部分，第一部分为统一的image:// ;第二部分为你的图片路径。4.效果展示...
2021-09-06 14:49:41
3227
原创 点击input框，添加阴影效果
1.普通的input框设置： input：focus{} <input type="text"></input>style样式：input:focus{ //设置阴影效果 box-shadow: 0px 0px 12px 0px rgba(98, 19, 254, 0.6); //设置border效果 border: 2px solid #5813fe;}2.Elementui中的输入框设置： .el-in...
2021-09-01 14:02:35
3371
原创 在node.js中如何使用ES6模块化
配置：1.确保安装了v14.15.1或更高版本的node.js2.在package.json的根节点中添加"type": "module"节点查看node的版本 node-v运行命令
2021-08-17 10:38:13
378
原创 windows下实现node版本的切换
Node版本的切换1.实现node版本的切换，首先要下载nvm2.nvm的下载地址：(推荐使用nvm-setup.zip)[地址]：https://github.com/coreybutler/nvm-windows/releases3.解压后安装如果之前下载过node，在安装的过程中可能会出现，nvm要求覆盖node版本vxxx的提示框，点击覆盖即可4.安装完成后，用命令查看nvm ： 会提示nvw下的相关命令...
2021-08-17 10:17:53
2230
原创 vue2中的过滤器filter怎样实现首字母大写
过滤器的注意点：1.filters本质上是一个函数2.在函数中，一定要有return3.过滤器的形参，可以得到“管道符”前面待处理那个值示例代码：<div id="app"> {{message | capi}}</div> filters:{ // 注意：过滤器函数形参中的val，永远都是“管道符”前面的那个值 capi(val){
2021-08-09 10:44:22
688
原创 el-table中合并行加入图标
代码：<el-table :data="tableData"> <el-table-column prop="classType" label="班型" width=""> <template slot-scope="scope"> <i v-if="scope.row.classType == '白班'" class="el-icon-sunny"></i> <i
2021-08-02 15:24:26
366
原创 el-table合并行的实现
el-table代码：<el-table :data="arrangeClassManageTableData" :span-method="objectSpanMethod" border style="width: 100%">绑定的data数据arrangeClassManageTableData：x456arrangeClassManageTableData: [ {
2021-08-02 15:15:05
98
原创 element中el-image怎样显示图片
代码如下：<el-image style="width:100%;":src="require('../../../../assets/images/businessLicense.png')"></el-image>区别于普通的<img />标签<img style="width:100%;" src="../../../../assets/images/busin...
2021-07-28 11:49:49
1208
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人