VUE - 随笔分类 - 周文豪

如何解决el-select-dropdown的宽度过长

摘要：问题：由于名称有的特别长，导致下拉框的宽度也跟着边长，导致页面效果不好。解决办法： 1、首先设置el-select的属性popper-append-to-body为false：不将下拉弹出框插入至 body 元素 <el-select v-model="listQuery.company":pop 阅读全文

posted @ 2024-07-31 14:26 周文豪阅读(575) 评论(0) 推荐(1) 编辑

validate方法进行表单异步校验时，回调函数内部避免使用全局变量

摘要：对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise 问题代码： save(){ console.log(that.pos.indexName) console.log(that. 阅读全文

posted @ 2024-06-05 17:28 周文豪阅读(42) 评论(0) 推荐(0) 编辑

Vue 前端根据list下载 Excel 文件

摘要：当前端已经有list时，此时下载就不需要再从后台获取数据，而是根据前端的list集合直接下载。步骤如下： 1、安装依赖 npm install -S file-saver（生产依赖，则为-s） npm install -S xlsx npm install -D script-loader （开发阅读全文

posted @ 2024-06-05 10:53 周文豪阅读(95) 评论(0) 推荐(0) 编辑

element 输入框(input)点击清空(clearable)的触发事件

摘要：element官网中的input输入框的事件如下：代码： <el-input placeholder="请输入名称" class="input-select" v-model="listQuery.name" @keyup.enter.native="filterByName" @clear="f 阅读全文

posted @ 2024-06-04 14:54 周文豪阅读(665) 评论(0) 推荐(0) 编辑

svg图片放img标签报错解决办法

摘要：错误代码： <div v-if="item.showType == '2'" :id="'tag'+index" class="tag-icon-text" @click="tagClick(item)"> <img src="@/assets/images/flag.jpg" class="img 阅读全文

posted @ 2024-06-03 11:00 周文豪阅读(119) 评论(0) 推荐(0) 编辑

滚动条插件vue-scroll

摘要：一、介绍 vuescroll 是一个基于 vue.js 2.X虚拟滚动条，它支持定制滚动条的样式，检测内容尺寸变化、能够使内容分页、支持上拉-刷新，下推加载等诸多特性二、特点 (1)拥有原生滚动条的滚动行为(2)可以定制滚动条的样式(包括颜色、尺寸、位置、透明度、是否保持显示等)(3)在模式之间阅读全文

posted @ 2024-05-28 11:55 周文豪阅读(827) 评论(0) 推荐(0) 编辑

前端debugger未生效

摘要：解决办法：在vue.config.js中添加如下内容 module.exports = { configureWebpack: { devtool: 'source-map' } } 阅读全文

posted @ 2024-05-21 11:24 周文豪阅读(390) 评论(0) 推荐(0) 编辑

Carousel轮播图实现预览功能

摘要：一、vue2 1、安装 npm install v-viewer@1.6.4 npm i -S viewerjs 2、main.js中引入 import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' Vue.use(Viewer) 阅读全文

posted @ 2024-05-21 10:54 周文豪阅读(41) 评论(0) 推荐(0) 编辑

this.$emit失效

摘要：这一次通过$emit实现子组件调用父组件的方法时，发现失效，耗了一个多小时，现在记录一下：错误代码：父组件 <pointDetail ref="pointDetail" v-if="pointDetailVisible" @set-hytabs="setHyTabs" @point-detail 阅读全文

posted @ 2024-05-16 15:36 周文豪阅读(258) 评论(0) 推荐(0) 编辑

Vue的step步骤条的使用

摘要：效果如下: 代码： 1、父组件 <template> <el-container class="container"> <el-steps :active="active" finish-status="success" simple style="margin-top: 20px;backgrou 阅读全文

posted @ 2024-05-10 11:28 周文豪阅读(1572) 评论(0) 推荐(0) 编辑

vue：子组件从后台获取数据期间，父组件被遮罩覆盖

摘要：效果：父组件代码 <template> <el-container v-loading="loading" class="container" element-loading-background="rgba(1,35,54, 0.8)"> <h1>这是父组件</h1> <HelloWorld m 阅读全文

posted @ 2024-04-29 15:54 周文豪阅读(25) 评论(0) 推荐(0) 编辑

为什么有值依然报async-validator ['xxx is required']

摘要：问题描述：点击确定时，前端控制台打印如下：但是实际上startStationName和endStationName均有值，如下所示：代码： <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" w 阅读全文

posted @ 2024-04-29 10:48 周文豪阅读(575) 评论(0) 推荐(0) 编辑

el-table去掉鼠标悬停的效果，隐藏表头，设置行高，每行显示不同的颜色

摘要：1、去掉悬停效果添加样式 /* 去掉鼠标悬浮效果 */ .el-table tbody tr:hover > td { background-color: transparent !important } 2、隐藏表头 el-table 添加属性 :show-header :show-header 阅读全文

posted @ 2023-12-05 17:02 周文豪阅读(1565) 评论(0) 推荐(1) 编辑

vue2和vue3导出页面为PDF格式：jspdf和html2canvas

摘要：一、vue2导出PDF使用步骤 1、安装html2canvas，将页面html转换成图片 npm install --save html2canvas 卸载： npm uninstall html2canvas 指定版本安装： npm install --save html2canvas@1.0.0 阅读全文

posted @ 2023-10-19 10:46 周文豪阅读(6503) 评论(0) 推荐(0) 编辑

下载vue.js、element-plus的js和样式、locale.js、icon-vue.js

摘要：一、下载vue.js 地址：https://www.bootcdn.cn/vue/ 找到vue.global.js 点击复制链接，在浏览器中打开，如下所示：二、下载element-plus的js和样式进入element-plus的官网:https://element-plus.org/zh-CN 阅读全文

posted @ 2023-09-28 11:07 周文豪阅读(3017) 评论(0) 推荐(0) 编辑

使用:required="true"时，el-form 表单验证出现xxx is required

摘要：原来的代码： <el-row> <el-col :span=24> <el-form-item :required="true" label="产品图片：" prop="productPicList" ref="upload-element"> <file-upload ref="productPi 阅读全文

posted @ 2023-08-10 10:05 周文豪阅读(489) 评论(0) 推荐(0) 编辑

VUE报错TypeError: Cannot read properties of null (reading 'name')

摘要：报错如下：错误代码： searchList() { this.entity = {} this.edit = null let query = {} query.traceCode = this.code this.loading = true codeApi.queryTraceCode(que 阅读全文

posted @ 2023-05-19 19:08 周文豪阅读(2620) 评论(0) 推荐(0) 编辑

changeOrigin

摘要：官网解释：意思是：当进行代理时，Host 的源默认会保留（即Host是浏览器发过来的host），如果将changeOrigin设置为true，则host会变成target的值。在vue-cli3中，默认changeOrigin的值是true，意味着host设置成target，这与cue-cli2 阅读全文

posted @ 2022-10-12 18:59 周文豪阅读(6215) 评论(0) 推荐(2) 编辑

随笔分类 - VUE