- 博客(29)
- 收藏
- 关注
RSS订阅原创 el-table树形表格懒加载如何在数据发生变化时重新加载节点数据
【代码】el-table树形表格懒加载如何在数据发生变化时重新加载节点数据。
2024-03-15 10:46:56
1150
原创 el-table左键双击单元格编辑内容(输入框输入计算公式可直接得出结果)，右键单击展示操作菜单，可编辑单元格高亮展示
el-table左键双击单元格编辑内容(输入框输入计算公式可直接得出结果)，右键单击展示操作菜单，可编辑单元格高亮展示。
2024-03-14 16:30:23
1194
1
原创 vue2点击左侧的树节点（el-tree）定位到对应右侧树形表格(el-table)的位置，树形表格懒加载
【代码】vue2点击左侧的树节点（el-tree）定位到对应右侧树形表格(el-table)的位置，树形表格懒加载。
2024-03-14 14:54:51
1574
原创 异步加载省市区树(vue+el-tree)
html <el-form-item label="门店：" :label-width="formLabelWidth"> <el-tree :props="props" :load="loadNode" node-key="id" ref="tree" highlight-current lazy show-che
2021-01-05 11:16:56
1002
原创 vue入门
1. 安装淘宝镜像 由于使用npm下载部分文件会比较慢，所以建议大家先安装好淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 2. 安装vue(渐进式框架) （1）CDN引入或者下载之后引入 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> （2）node下载地址 http://nodejs.cn/downl
2020-08-14 18:23:47
308
原创 vue-cli3通过不同命令打包文件到不同文件夹并配置不同请求地址（开发环境、UAT环境、生产环境）
一、区分不同环境 1.在根目录下新建3个文件（.env.development、.env.production、.env.uat）文件类型为.txt文件 .env.development VUE_APP_BASE_API=开发环境地址 VUE_APP_ENV=development .env.production NODE_ENV=production VUE_APP_BASE_API=生产环境地址 VUE_APP_ENV=production .env.uat NODE_ENV=production
2020-08-14 11:02:08
2037
原创 vue所有页面刷新一次mounted(以及所有生命周期函数)执行两次的解决方法
刚开始我发现页面每刷新一次，接口都请求两次，我以为是因为axios发送OPTIONS预检请求，但是我发现两次请求都是正常的get或者是post请求，并且只有在页面刷新的时候请求才触发两次，点击查询或者换页的时候请求只执行一次,我就猜想是不是mouted被执行了两次,然后我试着在mounted里输出数值，发现真的输出了两次，并且destoyed并没有执行，这意味着几乎同时执行了两个实例。那么问题就...
2020-04-13 21:41:11
10400
1
原创 css隐藏滚动条（谷歌和火狐示例）
通常浏览器（包括谷歌浏览器）使用下面的代码可以实现 .nav{ width: 220px;height: 100%;over-y:scroll;} .nav::-webkit-scrollbar {display: none;} 火狐浏览器需要使用以下代码 .nav{ width: 220px;height: 100%;over-y:scroll;scrollbar-width: none;} ...
2020-04-04 18:46:43
953
原创 vue动态增加商品属性
vue+element ui实现动态增加商品sku 实现逻辑（循环遍历数组，通过push来增加属性，通过splice移出属性） html <div> <el-row class="catySet"> <el-col :span="6"> ...
2020-03-25 15:58:24
1793
1
原创 vue项目打包的问题
1.打包之后出现白屏 需要修改config文件夹下的index文件 dev: { env: require('./dev.env'), host:'localhost', port: 8080, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: './...
2020-03-24 17:38:13
314
原创 vue+element父子表格改变小箭头所在列
只需要将不需要进行折叠的列设置type=""即可，实现效果类似下图 <el-table-column prop="id" label="ID" type=""> </el-table-column>
2020-03-24 14:14:05
1385
原创 前端des加密和解密（VUE）
安装加解密插件crypto-js cnpm install crypto-js 新建一个js(encryption.js)用来放置加密解密的方法 import CryptoJS from 'crypto-js'; //DES加密 export const encryptBy = (message) => { var key = '12345678'; function en...
2020-01-06 11:43:53
1029
原创 vue打印
安装组件 cnpm install vue-print-nb --save 在main.js中引入 import Print from 'vue-print-nb' Vue.use(Print); 在页面中使用 <template> <div> <el-button type="primary" v-print="#needPrint">打印</el-...
2019-12-16 18:19:46
298
原创 vue+element-ui表格导出
html代码 <el-button type="primary" @click="exportExcel">导出</el-button> <el-table :data="customerList" style="width: 100%" :header-cell-style="{background:'#eef1f6',color:'#606266'...
2019-12-11 18:28:27
443
原创 输入验证不能输入特殊符号
验证时不能输入特殊符号 example:[ { required: true, message: "请输入相关信息", trigger: "blur" }, { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊符号' } ], 控制空格无法输入 <el-input v-model="ruleForm.exa...
2019-12-10 18:27:58
1186
原创 选项卡切换（横向）
选项卡切换，超出横向滚动 css代码 <style> .bigBox { width: 100%; height: 1rem; line-height: 1rem; padding: 0 0.24rem; overflow-x: scroll;//横向...
2019-12-05 10:12:31
760
原创 超出两行展示省略号
html内容只显示两行，超出两行的用省略号展示 overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
2019-10-31 10:13:15
211
原创 清空el-cascader的所选内容（vue+element ui）
点击清空筛选项按钮清空el-cascader的所选内容 html <el-cascader style="width:160px;" clearable emitPath="true" v-model="form.goodsClassfiyList" ...
2019-10-28 12:23:21
11836
6
原创 原生js时间戳的转换
我们经常会需要将后台返回来的时间戳转化为正常的时间格式展示在页面上，所以就需要将时间戳进行转换（直接上代码） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>时间戳的转换</title> </head> &l...
2019-10-24 11:38:59
577
原创 vue时间戳转换
vue时间戳转换 安装moment插件 cnpm install --save moment 在main.js里进行配置 import moment from 'moment' Vue.filter('dateFmt', (input, formatString = 'YYYY-MM-DD HH:mm:ss') => { //es5函数参数设置默认值 //const last...
2019-10-24 10:49:48
910
原创 mp4格式的文件在video标签内无法展示的解决方法
mp4格式的文件在video标签内无法展示的解决方法 在项目中发现同样是mp4格式的视频，使用html5中的video标签引入一个可以正常播放而另一个不可以。解决这个问题的关键是需要明确video标签支持的视频格式 通过查找资料发现video标签所支持的视频格式为： WebM 容器通常包括了 VP8/VP9 视频。主要在 FireFox 和 Chrome 当中支持。 MP4 容器通常包括 H.26...
2019-10-22 16:53:48
3155
1
原创 手风琴图片切换
在实际开发项目当中经常会遇到需要不同的栏目以手风琴的形式切换（即鼠标移到哪个块儿上哪个块儿变宽，其余的块儿变窄） 实现效果 实现代码 html代码（结构为一个大盒子banners里面有3个小盒子banner，小盒子banner内为具体内容） <div class="banners"> <div class="banner"> <...
2019-10-21 15:29:39
373
原创 HTML5微信支付和微信公众号内微信支付(VUE)
实现html5微信支付以及微信公众号内微信支付 微信公众号内微信支付 首先进行微信授权获取code /*获取授权拿到code*/ getCodeApi(state){//获取code let urlNow=encodeURIComponent(window.location.href);//授权之后重定向到当前页面 ...
2019-10-18 15:11:25
805
原创 vue 实现类似淘宝的商品详情页的商品展示
vue 实现类似淘宝的商品详情页的商品展示 利用vue和swiper实现缩略图控制 / Swiper互相控制 具体需求描述： 图片大图自动轮播展示，下面的缩略图跟着变化，点击小图切换到对应的大图，大图停止自动轮播 实现代码 HTML代码 <swiper :options="swiperOptionTop" class="gallery-top imgs" ref="swiperTop"&g...
2019-10-18 14:08:08
10217
原创 判断是pc端还是移动端
created() { console.log("判断在什么浏览器开始"); console.log(navigator.userAgent); console.log("判断在什么浏览器结束"); if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { //移动端打开跳转到百度 ...
2019-10-16 17:36:10
192
原创 vue页面文本改为可复制
vue页面文本改为可复制 问题描述 很多时候用户希望可以通过选中页面中的文字来复制文本,但是我们会发现使用vue完成制作的页面上的文本用户是无法选中的，因此也不能够实现复制的操作。 解决方法 其实我们只需要在全局的样式里面设置 -webkit-user-select这个属性就好了,之后我们就会发现页面的文本可以被选中了。 body,html { background: #f7f7f7; c...
2019-09-24 10:06:30
3619
原创 vue同时使用v-if和v-for出现key值重复的问题
vue同时使用v-if和v-for出现key值重复的问题 具体的问题描述 <router-link :to="{name:'shopList',params:{orderType:orderType}}" v-for="(item,index) in brand" :key="index" v-if="ord...
2019-09-20 17:45:25
3004
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人