vue
v_loading
这个作者很懒,什么都没留下…
展开
-
vue-router的菜单换成二级目录访问
问题需将vue-router的菜单从一级目录换成二级目录访问实现只需在vue.config.js中配置就行了效果原创 2022-01-08 10:58:57 · 729 阅读 · 0 评论 -
application/x-www-form-urlencoded方式对post请求传参
application/x-www-form-urlencoded方式对post请求传参问题vue项目中,axios用application/x-www-form-urlencoded方式对post请求传参,但是按正常的data方式传一直获取不到参数。实现 async setToken() { /* let data = { grant_type: 'client_credentials', client_id: '62vwjyr7tdeizy0dx4',原创 2021-12-31 16:54:19 · 3837 阅读 · 0 评论 -
vue项目用echarts画折线区域图,并进行相关参数配置。
#要求显示一条折线图表示河堤数据,两条区域图分别显示水流和河底数据。#效果#实现 <div id="charts1" class="ct1"></div>//获取数据getData() { getDataApi().then((res) => { if (res.status == 200) { let data = res.data.data; let arr = {原创 2021-09-07 14:43:29 · 108 阅读 · 0 评论 -
openLayers画轨迹图,引用jeojson文件数据
#要求项目要求画出地图上河流的流向。#实现geoserver发布了河流的图层,描出了河流的点位。导出geojson文件,拿到各个点的位置。在地图上画出各个点。#静态轨迹先画出地图,本项目采用的是天地图。再叠加河流图层,绘制出各个点。代码//获取geojson文件的数据axios.get('/json/bmskline.geojson').then(res => { let arr = res.data.features[0].geometry.coordi原创 2021-09-03 16:06:17 · 1129 阅读 · 1 评论 -
openlayers天地图叠加geoserver图层,并对包含多个图层的图层进行过滤
#一个个叠加图层先筛选后端接口返回的图层,在一个个叠加显示。要求geoserver发布多个图层,在根据数据进行筛选。//一个个叠加图层this.addView=[{addTime: "2021-08-23 17:12:50"expression: "$>0.5"id: "1"lableId: "87"layerUrl: "http://dataflow.bxzscloud.com:30009/geoserver/sz/wms?a=b"name: "sz:nlwmx"prefix:原创 2021-08-27 10:37:01 · 1729 阅读 · 0 评论 -
vue动态获取路由,动态添加路由
后端返回路由数组,前端生成router。#登录时获取路由,或者接口返回路由。login.indexasync handleLogin() { let res = await postUserLogin(this.loginForm); // console.log(res); if (res.status == 200) { localStorage.setItem("token", res.token); localSt原创 2021-08-09 14:42:30 · 1707 阅读 · 0 评论 -
openlayers天地图叠加geoserver发布的图层
#叠加效果#实现##在geoserver发布画好的图层地址:http://localhost:8080/geoserver/workspace/wms##vue项目中调用 //叠加geoserver发布的wms图层 //workspace:test001 为图层name var geoserverUrl = "http://localhost:8080/geoserver/workspace/wms"; var wmsSource = new TileWMS(原创 2021-06-17 15:11:43 · 414 阅读 · 0 评论 -
vue项目自定义指令控制按钮权限
#自定义指令判断方法permission.js// permission.jsimport Vue from 'vue';// 是否有权限const hasPermission = btnRoleList => { // 当前用户的权限列表 let role = localStorage.getItem("role"); return btnRoleList.some(e => role.includes(e));};// 指令const has =V原创 2021-05-27 16:31:40 · 298 阅读 · 0 评论 -
封装查询字典接口
#main.js引入#接口文件#使用 <el-form-item label="标签规则" prop="direction"> <el-select v-model="label.direction" placeholder="请选择标签规则" :clearable="true" > <el-option原创 2021-05-25 11:11:43 · 191 阅读 · 0 评论 -
vue页面中数组改变,页面数据不改变
#问题数组改变了,页面数据没有动态变化,没有双向绑定的效果。#原因原因是vue监听不到数据类型特别复杂的属性。若data中数据类型较为复杂,方法methods中改变对象的属性,页面并不会改变。#解决可以使用this.$set()来进行强制更新,进而解决问题。#使用对象操作: 三个参数:this.set("改变的对象","改变的对象属性","值")数组操作: 三个参数:this.set("改变的对象","改变的对象属性","值")数组操作: 三个参数:this.set("改变的对象","原创 2021-05-21 10:22:20 · 1236 阅读 · 0 评论 -
先获取中心点再加载天地图OpenLayer
#问题加载地图的时候,中心点还没从接口返回,于是地图渲染不出来。#解决##使用v-if来控制地图的渲染##详情原创 2021-05-21 10:04:51 · 129 阅读 · 0 评论 -
vue项目表单验证,防重名
#设置rules//调用接口验证设备IDlet validateRepeatVerCode = async (rule, value, callback) => { await getRepeatStationDevId(value) .then((res) => { console.log("获取重复版本号数量", res); if (res.code === 200) { if (res.data原创 2021-04-26 15:26:26 · 785 阅读 · 0 评论 -
页面全屏显示
#样式<div class="fullScreen"> <el-tooltip class="item" effect="dark" :content="isFullScreen ? '退出全屏' : '进入全屏'" placement="top" > <i class="el-icon-f原创 2021-04-22 17:20:49 · 151 阅读 · 0 评论 -
vue项目xlsx导入导出
#准备##安装npm install xlsx --s##引入import xlsx from "xlsx";#导入 <el-upload action="" :auto-upload="false" accept=".xlsx, .xls" :show-file-list="false" :on-ch原创 2021-04-19 10:13:29 · 272 阅读 · 0 评论 -
vue项目formdata格式上传文件
#按钮 <el-upload class="upload-demo" action="" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :limit="1" accept=".docx, .pdf, .doc" :on-exceed="handleExceed" :http-request="modeUpload">原创 2021-04-19 10:33:08 · 745 阅读 · 0 评论 -
el-upload手动上传多张图片
#使用el-upload配置:http-request=“modeUpload” <el-form-item label="设备图片" prop="file"> <el-upload ref="upload" action="" list-type="picture-card"原创 2021-04-21 14:06:23 · 2334 阅读 · 2 评论 -
地址转经纬度
#准备百度接口地址:http://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-geocoding#应用##jsonp跨越问题##将地址转经纬度this.$jsonp("http://api.map.baidu.com/geocoding/v3/", { address: this.form.workAddress, output: "json",原创 2021-04-19 14:13:15 · 118 阅读 · 0 评论