vue
南极一块修炼千年的大冰块
一名不断成长中的前端开发工程师,希望在这里能多多学习,同时也能将知识分享给更多的人。
展开
-
vue自定义全局过滤器filter
原理步骤如下:将filter方法暴露出来挂载在vue实例上直接使用对应的操作为:在公共方法文件夹utils内新建filters.js文件在main.js中对filters中暴露的方法进行挂在vue中在项目任意页面直接使用以时间过滤为例,代码如下:filters.js// 此文件为公共的全局过滤器// 时间戳格式化过滤器,传参如下:// value:时间戳,string,number均可// num:返回样式,默认1(1:2020/12/16)(2:2020-12-16 1原创 2020-12-16 16:12:56 · 414 阅读 · 2 评论 -
elementui上传照片超出指定张数之后,隐藏上传框
el-upload里面绑定一个占位class::class="{hide:hideUpload}"data里面初始值:hideUpload: false,onChange里面(添加文件、上传成功和上传失败时都会被调用的那个):this.hideUpload = fileList.length >= this.limitCount;handleRemove里面(删除文件被调用的那个):this.hideUpload = fileList.length >= this.limit原创 2020-11-23 16:36:53 · 1673 阅读 · 0 评论 -
axios发送post请求500
const params = new URLSearchParams();params.append('couponNo', couponNo);axios.post('/order/addThirdAnniversaryCoupon.action',params).then((res) => { console.log(res)}).catch((error) => { console.log(error)});原创 2020-11-22 23:00:38 · 2735 阅读 · 0 评论 -
vue 在css 引入背景图background: url(艾特assets/img/bg.png) 报错
vue 在css 引入背景图background: url(@assets/img/bg.png) 报错 Cannot find module ‘./@assets/img/bg.png’把background: url(@assets/img/bg.png) 改为background: url(~@assets/img/bg.png)原创 2020-11-22 22:48:18 · 11494 阅读 · 6 评论 -
vue+elementui地址三级联动,附代码及中国省市区地址json文件
没什么难的东西,也没有复杂的逻辑,但是重新写可能费时间,贴出代码给大家工作中参考(复制粘贴)一下吧。template代码<el-form-item label="选择地址" label-width="100px" prop="province"> <section class="address-select-list"> <el-select class="adress-select" v-model="formAddressData.province"原创 2020-11-10 12:06:30 · 2867 阅读 · 1 评论 -
el-diolog自定义样式的问题
<style> </style>不能加 scopedcustom-class 是el-dialog 的自定义类名,直接class的类名会被绑定到el-dialog的父元素上原创 2020-10-16 16:54:25 · 277 阅读 · 0 评论 -
elementui表格自定义表头,template slot=“header“,表头判断监听不到数据更新的问题
代码背景:很简单的一个小功能,每一项都有一个继续或者暂停的按钮,表头有一个全部继续或全部暂停的总按钮。类似于选中和全选全不选的功能。<el-table-column align="center"> <template slot="header"> <span @click="xxx"> {{this.allBool?'全部继续':'全部暂停'}}</span > </template> <template slot-scop.原创 2020-08-31 16:50:38 · 8972 阅读 · 4 评论 -
vue中跳转刷新页面或路由,浏览器提示当前页面未保存
mounted() { // 地址跳转前拦截 window.onbeforeunload = function (e) { e = e || window.event; // 兼容IE8和Firefox 4之前的版本 if (e) { e.returnValue = '关闭提示'; } .原创 2020-08-03 19:52:11 · 1350 阅读 · 0 评论 -
@keyup.enter.native不生效?看看@keyup.enter.native和@keyup.enter的区别和使用
vue中特殊的键盘修饰符,不必去记特定的keyCode:@keyup.13 == @keyup.enter@keyup.9 == @keyup.tab@keyup.46 == @keyup.delete (捕获 “删除” 和 “退格” 键)@keyup.27 == @keyup.esc@keyup.32 == @keyup.space@keyup.38 == @keyup.up@keyup.40 == @keyup.down@keyup.37 == @keyup.left@keyup.39原创 2020-07-23 10:20:21 · 7985 阅读 · 4 评论 -
懒加载情况下,更改某一页某一条数据后,如何做到页面位置不变实时更新的4种方法
例如:我向后台请求数据,,共12条数据,每页是5条数据,一共3页,即请求3次,用懒加载实现。第一次我请求第1页,把拿到的5页数据存在dataList中,然后渲染出来。 当用户拉到底部,我请求第2页数据,通过concat()方法存在dataList中,再次渲染5条数据。 当用户再次拉到底部,我请求第3页数据,第3页只有2条数据,通过concat()方法存在dataList中,然后渲染在列表中。...原创 2020-04-30 11:54:59 · 1178 阅读 · 1 评论 -
在vue中使用echarts时使用v-if动态隐藏显示空白的问题
第一个问题:代码如下<el-button @click="tubiao">切换图表</el-button> <div id="chart1" v-if="+abc === 1"></div> <div id="chart2" v-if="+abc === 2"></div> <div id=...原创 2019-11-01 18:14:47 · 2714 阅读 · 0 评论 -
在局域网下通过ip地址访问vue本地项目
一找到:build>>webpack.dev.conf.js把const HOST = process.env.HOST修改为:const HOST = ‘192.168.1.139’(192.168.1.139是本地电脑的ip地址)二找到:package.json把"dev": “webpack-dev-server --inline --progress --con...原创 2019-10-29 14:11:38 · 440 阅读 · 0 评论 -
在main.js的axios中配置响应拦截器,当token值不合法直接跳转到登录页
先上代码:// 给axios配置响应拦截器axios.interceptors.response.use( function(response) { // 通过响应拦截器,直接返回 res.data console.log(response.data.code) if (response.data.code === 4002) { Vue.prototy...原创 2019-09-29 17:32:09 · 862 阅读 · 0 评论 -
element-ui编辑表单中的el-radio无法选择的情况
困扰了半上午的bug,表单样式及代码如下。问题是回显数据之后,当我点击其他的radio想要选择的时候,勾选不了。在网上找到了一样的bug,有解决方案,同样没有找到原因。解决方案是:原本是把从后台得到的数据res.data直接赋值给editPowerForm,现在需要先把res.data赋值给let obj,然后再由let obj赋值给editPowerForm,就可以了。还有需要注意的...原创 2019-08-09 11:11:32 · 14128 阅读 · 3 评论 -
关于Error in callback for watcher “data“: “TypeError: data.indexOf is not a function“的错误
关于Error in callback for watcher “data”: "TypeError: data.indexOf is not a function"的错误说明原因:表格显示需要数组包含对象的形式,每个对象是一行数据,拿到的数据格式不对。错误例子:从后台获取数据res.data,显示在表格中。只有一条数据,六个内容,应该是一行六列,但是出现了六行六列,且都为空。报三个...原创 2019-07-16 11:59:02 · 29391 阅读 · 3 评论 -
在el-table中判断三种情况,显示不同的数据
后端传来的数据是数据0,1,2。0代表未支付,1代表支付宝支付,2代表微信支付,要求动态显示在表格中 <el-table-column align="center" prop="pay_method" label="支付方式" width="150"> <template slot-scope="{row: {pay_method}}"> ...原创 2019-07-12 21:25:06 · 9212 阅读 · 0 评论 -
在vue+element-ui中,select选项值动态从后台获取,同时将选中值的id传给后台的方法
**问题:** 选项动态从后台获取,同时要实时获取到用户选中值的id 如select框有红,黄,蓝三个值,id分别为1,2,3 用户点击红,我要获取到红的id为1 用户点击黄,我要获取到红的id为2 用户点击蓝,我要获取到红的id为3 **首先问题步骤分为三步:** 1,点击select框,发送请求到后台取到值data,动态渲染到页...原创 2019-07-12 19:14:11 · 40236 阅读 · 20 评论 -
vue命令在当前目录快速生成项目详解,vue项目目录文件说明
准备:全局安装脚手架工具 vue-clinpm命令npm i vue-cli -g如果安装了yarn 可以用yarn global add vue-cli安装之后通过vue --version可查看版本1,使用vue命令在当前目录快速生成项目 vue init webpack 项目名字1,默认项目名字2,默认项目描述3,作者(默认读取git配置)4,选择构建版本, 选择runti...原创 2018-12-20 09:36:22 · 5293 阅读 · 0 评论