GongWei_的博客

编辑信息时，因为后端返的图片数组，和Upload的api回调fileList数组不相同，导致在删除图片后，不知道自己删的具体是那一张图以至于删除不了图片 只能新增，后面采用了下面方法解决这个问题<el-upload list-type="picture-card" :action="action" :file-list="userForm.hyfile" :before-remove="beforehyRemove" :before-upload="handlehySu

var arr=[ { banci: "09:00-21:00", nowday: "5月18日", shiftName: "白班", sid: "21381668786929665", }, { banci: "21:00-09:00", nowday: "5月18日", shiftName: "晚班", sid: "2138166878692

具体报错：echarts.js?a670:2220 Can’t get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload.出现问题的场景：我是在tab分页中需要插入echarts柱形图，默认开始是设备oee报表这个分页。报错

在动态图里，往往需要用到定时器去动态渲染数据，我的需求是：当x轴类目过多的时候，就让它自动滚动，这个时候需要用到定时器去动态的控制dataZoom里endValue的值，this.barInter = setInterval(() => { // 每次向后滚动一个，最后一个从头开始。 // console.log(this.xNum) if (option.dataZoom[0].endValue >= option.series[0].data

关键点：xAixs.axisTick.alignWithLabel:truexAxis: { type: "category", //类名轴 data: [ "3月1日", "3月2日", "3月3日", "3月4日", "3月5日", "3月6日", "3月7日", ], .

关键点：series.stack: “”, 同个类目轴上系列配置相同的stack值可以堆叠放置。具体实现series: [ { name: "绿灯", type: "bar", stack: "total", emphasis: { focus: "series", }, data: [95, 90, 80, 6.

关键点：xAxis.axisLabel.interval:0 强制显示所有标签、 xAxis.axisLabel.rotate:旋转角度 xAxis: { type: "category", //类名轴 data: [ "待人", "中途调模", "换料", "待料", "设备故障", "换款", .

关键点：series.type: “pictorialBar”,<div class="cl-top-content" id="deviceOee" style="width:500px;height:200px"></div>mounted() { this.barChart(); },//设备OEE barChart() { let myChart = this.$echarts.init(document.getElementById.

关键点：yAxis.axisLabel.textStyle.color、xAxis.axisLabel.textStyle.color具体实现yAxis: [ { type: "category", show: true, inverse: false, data: ["80%以上", "50%-80%", "50%以下"], axisLine: {//刻度线显.

关键点 smeries-bar.itemStyle 设置图形样式series: [{ type: "bar", itemStyle: { normal: { // barBorderRadius: [4, 4, 4, 4], color: function (params) { var colorlist = ["#81D3F8", "#FF6600", "#FF004D".

点击红色框外的遮罩层区域关闭遮罩层方法一：关键点：@click=“close($event)” ref=“msk”<div v-if="popup.winning" class="coupon-popup" @touchmove.prevent @click="close($event)"> <div class="popup-content" ref="msk"> <img class="coupon-page" :src="popup.couponpage.

方法一：在遮罩层标签上添加@touchmove.prevent方法二：遮罩层显示时把下方的父盒子css设置为固定定位宽100%高100vh 超出隐藏.content{ width:100%; height:100vh; overflow:hidden}

方法一：js函数里var d=new Date(res.data.list[0].createTime);//res.data.list[0].createTime后端返的时间var time=d.toLocaleDateString()方法二：行内 <el-table-column align="center" width="180" label="创建时间"><template slot-scope="scope"> {{ new Date(.

先看看bug可以看到这里我们想把监听函数获取到的 duration push进file这个数组里，结果因为事件监听后执行（先打印出579行file的值，再打印出573行 duration的值），导致file里的duration为undefined解决办法：方法一：使用 setTimeout 异步处理successVideo: function (response, file, fileList) { this.file = []; for (let i = 0; i &l

做这步操作主要是后端要求传视频的时长duration这个字段，获取方法第一种：<el-upload class="upload-demo" :multiple="multiple" :before-upload="getVideoToken" action="http://up-z2.qiniu.com" :on-success="successVideo" :data="up

1、安装npm install axios --save2、在main.js文件引入import Axios from 'axios';//后台交互Vue.prototype.$http=Axios//defaults 设置全局默认路径Axios.defaults.baseURL="/bigData"3、使用//第一种this.$http.post('/index/customer/').then(function(res) { // console.log('这是返回的客户数据')

1、安装npm install element-ui -S2、在main.js文件引入import ElementUI from 'element-ui';//引入ui框架import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)3、使用根据官网 element-UI官网文档 就可以使用ui组件如：<el-row> <el-button>默认按钮</el-button>

1、安装npm install echarts --save2、引入全局引入在main.js文件引入import echarts from 'echarts'Vue.prototype.$echarts = echarts按需引入// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。import * as echarts from 'echarts/core';// 引入柱状图图表，图表后缀都为 Chartimport { BarChart

关键要点：responseType: “blob”,this.$axios({ url: "/api/device/deviceInfo/createDeviceInfoByExcel", method: "post", headers: { "Content-Type": "multipart/form-data", token: localStorage.getItem("token"), },

<template> <div class="app"> <Upload ref="upload" action="/api/device/deviceInfo/createDeviceInfoByExcel"//接口地址 :headers="{//请求头 token: token, 'Content-Type': 'multipart/form-data', }" ...

<input type="file" id="people-export" ref="inputer" @change="fileUpload" />//方法：fileUpload(event) { console.log(event); let file = event.target.files;//一个文件流 let formData = new FormData(); formData.append("file", file[0]);.

1、新增属性以及修改value值方法：this.$set(this.obj,‘key’,value)或var vm = new Vue({…})vm.set(this.obj, “key”, value)var demo={a:"1",b:"2"}this.$set(demo,"c","3")console.log(demo)//{a:"1",b:"2",c:"3"}//如果对象中存在该key值，那么就不是新增属性，而是修改该key值的value值this.$set(demo,"c","4

我们正常来说清除定时器是在页面销毁的时候清除，如this.timer= setInterval(()=>{ console.log("我刷新了")},15000)destroyed(){ clearInterval(this.timer)}但是在后台管理页面的时候这样做却失效了。问题所在：我们的在写后台时，习惯性设置一个主页面（也就是包含头部、侧边导航栏、底部、中心内容）。在子页面设置定时器时，切换其他子页面并不是真正的离开了页面，实质上还是在主页面上，所以在dest

准备流程：注册百度账号——申请成为百度开发者——获取服务密钥（ak）——使用相关服务功能使用流程：1、安装npm install vue-baidu-map --save2、在index.html页面引入<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>3、使用<template> <div class="b

效果1、首先可以找到百度地图信息窗口的class名，根据class名去修改样式我这里只修改了标题的样式//百度地图信息弹窗标题.BMap_bubble_title{ font-weight: 700!important; margin-bottom: 10px; font-size: 16px;}2、窗口中心内容的样式，是自己写标签已经样式var marker = new BMap.Marker(new BMap.Point(112.14,22.125));map.addO

功能1:默认展开鹰眼map.addControl( new BMap.OverviewMapControl({ isOpen: true,//默认展开 anchor: BMAP_ANCHOR_BOTTOM_RIGHT, })); 功能2：自定义图标 // 创建小车图标 var myIcon = new BMap.Icon( "../../../static/useing.png", new BMap.Size(

想要的效果：var marker1 = new BMap.Marker(new BMap.Point(res.data.data[0].gpsX, res.data.data[0].gpsY),{icon:myIcon});var marker2 = new BMap.Marker(new BMap.Point(res.data.data[1].gpsX, res.data.data[1].gpsY),{icon:myIcon2});var marker3 = new BMap.Marker(new

写法：@keyup.enter.native=“自定义事件”<Input v-model="form.checkCode" placeholder="请输入校验码" @keyup.enter.native="searchAllCompany"> <span slot="append"> {{ code }} </span></Input>methods:{ searchAllCompany(){ .

我这里是生成4位数字验证码关键知识点：Math.random()返回介于0-1 之间随机数 包含小数 比如 0.123456Math.floor()向下取整createCode() { var demo="" //这里取的是4位，所以for循环4次，如果是6位数字验证码则为6 for(var i=0;i<4;i++){ //设置随机数范围,这设置为0 ~ 9 var a = Math.floor(Math.random()

功能点：1、国际化，中文、英文、繁体相互切换；2、根据浏览器默认语言设置页面的默认语言；3、手动切换语言；4、给变量添加国际化效果：1、安装npm install vue-i18n --save2、在src文件夹新建locale文件夹，并在locale文件夹新建en-US.js、zh-CN、zh-TW文件,以及载入文件index.jsen-US.js 这个为英文翻译文件module.exports = { navbar: { English: 'Engl

<select class="select" v-on:change="indexSelect($event)" v-model="pcNum"> <option v-for="(item, index) in pcArr" :key="index" v-bind:value="item.pcNum">{{ item.pcNum }}</option></select>js：data() { return { pcNum:'PC20200

我这里的场景是第一行的操作栏 只有计算这一个按钮并且点击计算 计算按钮会变成停止，其他行的操作项有 计算和删除两个按钮代码：<vxe-table-column title="操作" width="200"> <template v-slot="{ row, rowIndex }"> <template v-if="rowIndex == 0"> <vxe-button v-if="row.show"

我这里的使用场景是点击某一行的使用，该行的数据就调整在第一行显示了//给使用按钮添加方法，方法如下use(row) { let values = this.tableData; let value = row; let res = [value].concat(values.filter(item => item != value));//concat() 方法用于连接两个或多个数组 console.log(res); this.tableData = res;}...

关键点：给表格添加属性 :cell-style=“cellStyle”cellStyle(row, column, rowIndex, columnIndex) { // console.log(row, column, rowIndex, columnIndex); if (row.seq == '1') {//判断条件，如果想要改变其他行样式，就写那一行的下标 return `background-color: #ffe5bb !important;fontSize: 16px; c.

效果就是显示某个数值不是直接显示，而是从0开始滚动，直到为那个数值时停止滚动1、新建数字滚动组件：test.vue文件<template> <div class="number-grow-warp"> <span ref="numberGrow" :data-time="time" class="number-grow" :data-value="value">0</span> </div></template> &l

在main.js中定义new Vue({ el: '#app', router, data: function(){ return { pcNumnow: 'PC20200924',//定义的全局变量 } }, components: { App }, template: '<App/>'})在页面调用let demo= this.$root.pcNumnow//即demo的值为PC20200924//修改全局变量的值this.$root.pc

方法一：用params传参在url不可见，要注意的是用params传参 需要传在router index.js 定义的name名，即 name: ‘Parameter’,页面一：<router-link :to="{ path: '/Parameter',name: 'Parameter',params: { pc: pcNumnow } }"><li class="nav-list">参数管理</li></router-link>//pcNumnow

需要使用qs插件将参数序列化1、安装npm install qs --save2、在main.js引入import Qs from 'qs'Vue.prototype.qs = Qs3、使用var this=_thislet data = { batchNum: _this.pcNumnow };//要传给后端的参数_this.$http.post('/index/grade/', _this.$qs.stringify(data)).then(function(res) {

需要在index.html文件设置即可*{ margin: 0; padding: 0;}

vue3出来一段时间了，element也更新了版本去兼容vue3，在这里简单的介绍一下如何使用element-plus吧1、安装npm install element-plus --save2、引入import { createApp, Vue } from 'vue';import ElementPlus from 'element-plus';import 'element-plus/lib/theme-chalk/index.css';import App from './App.vu