整理Vue项目开发过程中遇到的常见问题1
element UI表格排序sortable最简单的按大小排序,需要添加prop,不然无法使用表格后面增加的sortable没有作用解决办法:没有给表格添加prop属性<el-table-column align="center" label="闸门名称"prop='gatename' sortable>...
1 element UI表格排序sortable最简单的按大小排序,需要添加prop,不然无法使用
表格后面增加的sortable没有作用
解决办法:没有给表格添加prop属性
<el-table-column align="center" label="闸门名称" prop='gatename' sortable>
<template slot-scope="scope">
<span>{{scope.row.gatename}}</span>
</template>
</el-table-column>
2 表单清空没有效果,也不是提示报错的原因
解决方法:model中绑定的数据字段和Dom里prop的数据字段是不是完全一致, prop属性是否有写
3 tagview 下拉关闭菜单窗口对不上
侧边栏 顶部固定定位 偏移距离引起的
解决办法:下拉关闭菜单事件x要减去想对应的距离
4 组件内的样式优先级大于外链全局样式
比如在一个页面里写了一个类名+样式,在其它页面也要用到这个类名,在其它页面第一次刷新时,样式不起作用,而要在设置样式的页面
刷新后,其它页面的样式才会被渲染出来
解决办法: 把样式写在全局文件index里面 styles---index.scss
5 Dialog 对话框 Vue开发中出现对话框被遮罩层挡住问题解决方案
解决办法:在el-dialog 标签上增加这个属性 :modal-append-to-body="false"
indexOf() 方法可返回数组中某个指定的元素位置。
splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。注释:该方法会改变原始数组。
slice() 方法可从已有的数组中返回选定的元素。
arrayObject.slice(start,end)返回值
返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。
A complete log of this run can be found in:debug.log
npm版本太低的原因
全局更新 npm
npm install npm -g
一、npm 的更新:
查看自己的 npm 版本:npm -v
查看官方文档可知,使用命令 npm install npm@latest -g
注意:一定要全局安装,不然node-v还是得到没更新之前的版本
二、node 的更新:
去官网下载需要的版本
我们在覆盖的时候要检查之前安装 node 的路径,使用命令 where node
也就是说我之前安装在 C:\Program Files\nodejs 文件夹下。覆盖安装和前面讲到的第一次安装方法相同,只是安装路径选择为同之
前一样的路径。
安装完后检查是否安装成功 node -v npm -v
6 编译插件vue-devtools,npm run build后报错 npm ERR! code ELIFECYCLE
错误原因:因为最新版本vue-devtools使用最新版本webpack4,所以node版本至少大于6.11.5
解决办法:卸掉以前装的node,到官网下载安装一个最新版本的node
7 style 加scoped问题不起作用,需要在选择器前面增加deep深度选择器才能选中元素
scoped 只是针对自定义的增加的类名,id, elment默认样式加scoped不会被渲染出来,
如果我们子组件添加scoped,同样的,如果子组件也用scoped标识了,那么在父组件中是不能设置子组件中的节点的;
若父组件有scoped,子组件没有设置,同样,也是不能在父组件中设置子组件的节点的样式的,因为父组件用了scoped,
那么父组件中style设置的样式都是唯一的了,不会作用与其他的组件样式;
覆盖element默认样式,不同的页面设置不同的值
解决办法:在原有的元素外面包裹一层DIV, 然后在每一个页面设置不同的值,如果只设置一个页面,那么所有页面的样式都会是一样的
::v-deep input::-webkit-input-placeholder {
color: #4d4d4d !important;
}
::v-deep input::-moz-input-placeholder {
color: #4d4d4d !important;
}
::v-deep input::-ms-input-placeholder {
color: #4d4d4d !important;
}
::v-deep input {
font-size: 14px !important;
font-family: "Franklin Gothic Book" !important;
}
8 表格数据懒加载圈圈位置跑到表格下面去了
解决办法:v-loading.body='boolean' 改成 v-loading='boolean'
9 更换主题颜色后 el覆盖样式不起作用了
解决办法:更改element默认的样式
10 deep深度选择器ie不支持 首页图标三条横线颜色更改不了
解决办法:用fill属性控制svg图标的颜色
<style scoped>
.el-dialog__wrapper /deep/ .el-dialog {
width: 60% !important;
}
</style>
11 项目启动时遇到以下错误:This dependency was not found.........
This dependency was not found:
!!vue-style-loader!css-loader?{“minimize”:false,“sourceMap”:false}!../…/node_modules/vue-loader/lib/style-compiler/index?{“vue”:true,“id”:“data-v-1d57e5ea”,“scoped”:false,“hasInlineConfig”:false}!stylus-loader?{“sourceMap”:false}!../…/node_modules/vue-loader/lib/selector?type=styles&index=0!./a.vue
in ./src/components/a.vue
To install it, you can run: npm install --save
!!vue-style-loader!css-loader?{“minimize”:false,“sourceMap”:false}!../…/node_modules/vue-loader/lib/style-compiler/index?{“vue”:true,“id”:“data-v-1d57e5ea”,“scoped”:false,“hasInlineConfig”:false}!stylus-loader?{“sourceMap”:false}!../…/node_modules/vue-loader/lib/selector?type=styles&index=0!./a.vu
解决方案: 一般提示出现什么什么找不到时,就是缺少相关依赖包,按提示重新安装提示的依赖包即可
npm install sass-loader --save
npm install node-sass --save
12 [Vue warn]: Duplicate keys detected: ‘101121201’. This may cause an update error.
解决方案:使用v-for遍历时,没有设置key值
注意:key值是必须唯一的,如果重复就会报错,可以把key值改为index(其实就是用索引做key值),就可以避免这个情况:
<ul>
<li v-for="(item,index) in array" :key="index">{{item.name}</li>
</ul>
13 找不到未定义的resetFields属性
vue.esm.js?efeb:591[Vue warn]: Error in event handler for "click": "TypeError: Cannot read property 'validate' of undefined"
[Vue warn]: Error in event handler for "click": "TypeError: Cannot read property 'resetFields' of undefined"
解决办法:给表单添加ref属性
14 我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况:
1、v-for遍历的数组,当数组内容使用的是arr[0].xx =xx更改数据,vue无法监测到
数组数据变动:我们使用某些方法操作数组,变动数据时,有些方法无法被vue监测,有些可以
Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测:
push() //向数组的结尾添加一个或多个元素并返回新的长度
pop() //删除元素并返回数组的最后一个元素
shift() //向数组的开头添加一个或多个元素并返回新的长度
unshift() //删除元素并返回数组的第一个元素
splice() //删除元素并返回被删除元素的数组
sort() //对数组中元素进行排序
reverse() //颠倒数组中元素的顺序
split() //方法用于把一个字符串分割成字符串数组
vue2.0还增加个方法可以观测Vue.set(items, indexOfItem, newValue)
filter(), concat(), slice() 。这些不会改变原始数组,但总是返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组
Vue 不能检测以下变动的数组:
① 当你利用索引直接设置一个项时,vm.items[indexOfItem] = newValue
② 当你修改数组的长度时,例如: vm.items.length = newLength
三种方式都可以解决,使用Vue.set、vm.$set()或者数组的splice方法。
15 常见状态码错误
Request failed with status code 400
解决方法:把传给后台的时间参数转换成时间戳的格式
Error occured while trying to proxy to: localhost:9527/api//auth/jwt/token
Failed to load resource: the server responsed with a status of 504 (Gateway Timeout)
解决方法:后台服务器可能没有启动
errError: Request failed with status code 401 (Unauthorized)
解决方法:交给后端开发人员处理
常见状态码解释
200 请求成功
304 请求的页面没有修改
400 请求语法错误服务器不理解
401 请求要求用户的身份信息
403 服务器理解请求客户端的请求,但是拒绝执行此请求
404 请求资源找不到
500 服务器内部错误,无法完成请求
504 充当网关或代理的服务器 末及时从远端服务器获取请求
16 如果进去某个页面后,这个页面突然卡住不能动,可能页面中那个标签嵌套不合法 比如查看el-table后面是否多了一个>符号
Do not use built-in or reserved HTML elements as component id:filter 不能用内置的元素作为组件的id名称
17 不能登录系统并提示error occurred while trying to proxy request /api//xx/xx/xx to http://192.168.1.188:8765
解决方法:
1 看有没有断网
2 服务器的IP地址有没有变
3 服务器地址能否ping通(ipconfig),如不能拼通,查看本地防火墙是否开启
18 Error: listen EADDRNOTAVAIL 192.168.1.166:9527
Error: listen EADDRNOTAVAIL 192.168.1.166:9527
at Object._errnoException (util.js:1024:11)
at _exceptionWithHostPort (util.js:1046:20)
at Server.setupListenHandle [as _listen2] (net.js:1334:19)
at listenInCluster (net.js:1392:12)
at doListen (net.js:1501:7)
at _combinedTickCallback (internal/process/next_tick.js:141:11)
at process._tickCallback (internal/process/next_tick.js:180:9)
at Function.Module.runMain (module.js:678:11)
at startup (bootstrap_node.js:187:16)
at bootstrap_node.js:608:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! shopapp@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the shopapp@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Program Files\nodejs\node_cache\_logs\2018-08-28T03_29_03_820Z-debug.log
监听一个当前电脑上不存在的ip的时候,是会出现上述该错误的。比如说原来我的电脑连着一个无线网,并且检查ip地址为192.168.1.123,并且我也用该地址进行监听。但是一旦电脑断开无线网,电脑上无该ip地址,若再次用该地址进行监听,则会出现上述错误。
将这个异常名字分解开来就是E ADDR NOT AVAIL
E:Error
ADDR:Address
NOT:Not
AVAIL:Available
解决方法:查看本地IP地址是否正确
19 提示帐户和密码错误,并且报错400 bad request
原因是前端字段类型与后端字段类型不一致
比如时间 数量 单价 价格 里数
编辑数据时input报红,原因是验证规则问题
20 URIError: Failed to decode param '/%3C%=h'
页面入口文件index script标签src路径有问题 h tml字母h后面多了一个空格
解决方法:去掉多余的空格
21 控制台调试出现两个重复的样式
可能element-ui第三方框架 库模板里面主题index.css文件里多写了一份css样式
路径如下
// const url = '../../../node_modules/element-ui/lib/theme-chalk/index.css'
解决方法: 去掉UI组件默认样式里面的多余css样式
22 子路由的值必须是数组, 不然报错router.children.some is not a function
baseRoute: {
path: '/baseManager',
component: Layout,
redirect: 'noredirect',
name: 'baseManager',
authority: 'baseManager',
meta: {
title: '基础配置管理',
icon: 'setting'
},
children: [
{
path: 'userManager',
component: _import('permission/admin/user/index'),
name: 'userManager',
authority: 'userManager',
meta: {
title: '用户管理',
icon: 'fa-user'
}
},
{
path: 'menuManager',
component: _import('permission/admin/menu/index'),
name: 'menuManager',
authority: 'menuManager',
meta: {
title: '菜单管理',
icon: 'category'
}
},
{
path: 'groupManager',
component: _import('permission/admin/group/index'),
name: 'groupManager',
authority: 'groupManager',
meta: {
title: '角色权限管理',
icon: 'group_fill'
}
}
]
},
23 模板标签套错,提示- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
错误写法:
<template>
<div></div>
<script></script>
</template>
正确写法:
<template>
<div></div>
</template>
<script></script>
实列上的select没有被定义,提示如下报错
Property or method "select" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
El-dropdown标签格式没有嵌套正确,提示如下报错
[Vue warn]: Injection "dropdown" not found
24 Vue js webpack模板里import路径中@符号是什么意思
resolve: {
// 自动补全的扩展名
extensions: ['.js', '.vue', '.json'],
// 默认路径代理
// 例如 import Vue from 'vue',会自动到 'vue/dist/vue.common.js'中寻找
alias: {
'@': resolve('src'),
'@config': resolve('config'),
'vue$': 'vue/dist/vue.common.js'
}
}
@等价于 /src 这个目录,免得你写麻烦又易错的相对路径,@这是webpack的路径别名
./代表当前项目
../代表上一级项目/是根目录
import vue1 from 'vue' 这句话的意思是: 加载vue模块,并输入变量vue1。
import后面的from指定模块文件的位置,可以是相对路径,也可以是绝对路径。如果是模块名,不带有路径,那么必须有配置文件,告诉js引擎该模块的位置。
25 字符串与对象互转
Array.toString()是将数组转化成字符串,因此不带 [ ]
JSON.stringify(Array)是从一个对象解析出JSON字符串,是带[]的
JSON.parse() 是用于从一个字符串中解析出json对象
26 注册组件时,组件名称中间需要用连字符,不然会报错
<template>
//模板中调用组件
<home-notice :options="options"
:list.sync='list'
@hidePanel='hidePanel'
@openPanelDialog='openPanelDialog'
@changeDrag='changeDrag'>
</home-notice>
</template>
<script>
import draggable from 'vuedraggable'
import Sortable from 'sortablejs'
export default {
components: {
draggable,
Sortable,
'base-map': () => import('./components/baseMap')
'home-notice': () => import('./components/homeNotice'), //引入并注册组件
'upload-image': () => import('@/components/Upload/uploadImage')
}
}
</script>
27 增加修改表单时,提示错误 Pre:TracePreZuulFilter
原因:传给后台的参数位置顺序放反了
28 富文本编辑内容返回的数据带标签,后台返回的数据带标签
<!-- 解决办法: 使用v-html指令解析标签 -->
<el-table-column min-width="500" align="center" label="内容" show-overflow-tooltip>
<template slot-scope="scope">
<span v-html='scope.row.content'></span>
</template>
</el-table-column>
29 <router-link :to={path:'',query:{}></router-link>页面跳转后新页面内容不会自动刷新
//解决办法: 增加以下路由钩子函数,当路由变化时根据id在数据库查找数据,发生create钩子函数之前
beforeRouteEnter(to, from, next) {
next(vm => {
console.log(vm)
// 这里vm就是当前页面的实例,可以执行methods中方法
if (vm.$route.params.id < 1) {
vm.$refs.form.resetFields();
// vm.form.imagerBase64 = undefined
vm.dialogStatus = 'create';
} else if (vm.$route.params.id) {
vm.getList();
vm.dialogStatus = 'update';
}
})
}
30 vue2.0中.vue文件页面跳转传递参数并获取
//声明式标签写法
<router-link :to="{path:'wlWaterWorkSituation',query:{id: this.listData[index].id}}"></router-link>
<router-link :to="{name:'wlWaterWorkSituation',params:{id: this.listData[index].id}}"></router-link>
//编程式js写法
this.$router.push(path:'wlWaterWorkSituation',query:{id: this.listData[index].id}})
//页面中获取参数
this.$route.query.id
this.$route.params.id
$route为当前router跳转对象里面可以获取name、path、query、params等
$router为VueRouter实例,想要导航到不同URL,则使用$router.push方法
返回上一个history也是使用$router.go方法
31 拖拽排序不起作用:拖拽元素一定要放在draggble标签内
<draggable v-model="tags"
:move="getdata"
@update="datadragEnd">
<!-- <transition-group> -->
<div v-for="element in tags"
:key="element.id">
{{element.name}}
</div>
<!-- </transition-group> -->
</draggable>
32 MapBox介绍
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '? <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
L.map('map')就是捕获一个<div id="map"></div>,把它当作一个地图观察器,将地图数据赋予上面。
setView设置地图中心点的经纬度和比例尺,作为用户的视图区域。
L.tileLayer就是矢量瓦片底图,用对应的URL上找对应的z,y,x。而s是分布式服务器快速选取,一般都是1-4,天地图做到了1-8。
tileLayer图层要addTo(map)加载在地图观察器上。例子当中瓦片底图使用的是openstreetmap,当然也可以使用天地图的瓦片数据作为一个家庭作业留给你们,参考htoooth/Leaflet.ChineseTmsProviders。
L.marker就是图标,首先需设置的是图标的坐标,bindPopup是绑定的冒泡提示,里面可以包装任意的innerHTML元素,openPopup是开启提示的方法。
33 无法添加class在模态框上, 设置宽度无效, 在组件上设置poper-class属性即可实现
<el-popover placement="right" trigger="click" width="555" popper-class="popperBox">
<base-ConfigDetailsInfo status="edit"></base-ConfigDetailsInfo> <!-- 配置信息详情 -->
<i style="float:right;vertical-align:middle;line-height: 30px;margin-right:8px;" class="el-icon-info" @click="getConfigInfo" title="配置信息" slot="reference"></i>
</el-popover>
34 select 设置光标位置select.selectionStart/select.selectionEnd=select.value.length
focusGet (e) {
const select = e.srcElement
this.$nextTick(() => {
// 设置光标位置
select.selectionStart = select.value.length
select.selectionEnd = select.value.length
})
}
35 列表页设置了缓存,详情页面的弹窗关闭后还显示遮罩层,按esc退出又可以了
原因:详情页关闭后的遮罩层是缓存列表页面弹窗的遮罩层,这个页面的弹窗状态被缓存下来了
解决方法:在跳转到详情页面之前关闭列表页面的弹窗
36 tag标题动态更改 正则表达式 当字段类型为date或timestamp时才能操作分区字段按钮,不区分大小写
解决方法:在created更改标题不更新,mounted才更新 updateTagView
const reg = /(date|timestamp)/i
// 当字段类型为date或timestamp时才能操作分区字段按钮,不区分大小写
const reg = /^(char|varchar|decimal)$/
// 当字段类型为char或varchar或decimal时才能操作字段长度
37 测试环境路由跳转显示空白页面
解决方法:查看路由菜单文件有没有增加菜单 服务菜单有没有增加 测试环境需要手工另外增加
38 this.$set方法一次只能增加一个属性,正则表达式没有位数限制/^\d+\$/
39 穿梭框控件怎么像树形控件获取当前节点上的数据信息?利用slot-scope属性接收节点上的数据(即渲染的数据)
<el-dialog :title="title" :width="width" :visible.sync="dialogConfigDataSourceVisible" :modal-append-to-body="false" :close-on-click-modal="false" center :before-close="handleClose">
<div class="transferWrapper">
<el-transfer style="text-align: left;" v-model="checkedColumn" filterable :titles="['未使用数据源', '已使用数据源']" :left-default-checked="leftChecked" :right-default-checked="rightChecked" :format="{ noChecked: '${total}',hasChecked: '${checked}/${total}'}" @change="handleChange" :data="dataT">
<span slot-scope="{ option }">
<i style="margin-right:3px;"><img src="@/assets/images/theme.png" alt="" style="vertical-align:middle;margin-top:-4px;"></i>
<i> {{ option.label }}</i>
<el-popover placement="right" trigger="click" width="555" popper-class="popperBox">
<base-ConfigDetailsInfo status="edit" :formData="formData"></base-ConfigDetailsInfo> <!-- 配置信息详情 -->
<i style="float:right;vertical-align:middle;line-height: 30px;margin-right:8px;" class="el-icon-info" @click.prevent="getConfigInfo(option.label)" title="配置信息" slot="reference"></i>
</el-popover>
</span>
</el-transfer>
</div>
<div class="dialog-footer">
<el-button @click="confirDialog" class="marginR20" size="mini">取消</el-button>
<el-button type="primary" @click="confirDialog" :loading="false" size="mini">保存</el-button>
</div>
</el-dialog>
40 axios get和delete请求无法正常传参(后台接收不到参数|| 控制台不显示参数),提示400 Bad Request
第一个参数为url,第二参数为你要传的参数(假如参数是obj),参数格式是{params:obj}
41 新增页面不经过登录路由跳转不成功, 原因路由被拦截了,router.beforeEach()全局前置守卫
第一步在router文件里面增加新页面的路由
第二步在permission文件设置白名单,如果项目没有设置白名单,当路由为新增的url时,执行next(),可参考login写法
import router from './router'
import { getCookie } from './utils/auth'
// 通过beforeEach钩子来判断用户是否登陆过 有无token
const whiteList = ['/login/', '/regist/', '/'] // 不重定向白名单
router.beforeEach((to, from, next) => {
console.log(to.matched)
// 判断是否有登录过
if (getCookie('userId_dev')) {
// 如果包含userId_dev 从登录页面跳转 直接跳转到首页 /
if (to.path === '/login') {
next('/smartHome/decIndex')
} else {
if (to.matched.length === 0) {
next('/404') // 判断此跳转路由的来源路由是否存在,存在的情况跳转到来源路由,否则跳转到404页面
}
next() // 如果匹配到正确跳转
}
// 没有登录
} else {
if (whiteList.indexOf(to.path) !== -1) {
next()
} else {
// 还没有登录过 则跳转到登录界面
next('/login')
}
}
})
42 git提交代码到远程提示HTTP Basic: access denied, 原因本地配置的用户名和密码与远程的不一致
43 进入控制面板,用户账号,凭据管理器
44 场景:有一个成果列表,每个列表上面右下角显示下拉操作菜单,单击小图标鼠标移到下拉菜单时,下拉菜单消失bug
原因 事件冒泡引起的
//vue 阻止事件冒泡
<ul class="listItemWrapper">
<draggable v-model="listItems" @chang="change" :move="move" :options="options">
<transition-group>
<li v-for="(item, index) in listItems" :key="index" class="listItem" @dblclick="getInfo(index)" @mouseenter="showIcon(index)" @mouseleave="noShowIcon()">
<div class="itemImgBox">
<img :title="'名称: '+item.name" :src="item.src" alt="" />
</div>
<p class="itemDescription">
<el-input v-model="item.name" v-if="item.isShowInput" size="mini" style="width:90px" @blur="desChange(index)" @keyup.enter.native="desChange(index)" :ref="'input'+index"></el-input>
<span v-else @dblclick.stop="showInput(index)">{{ item.name }}</span>
</p>
<div class="hoverBox" v-if="listIndex===index?true:false" @click.stop="showHandle(index)"> <img src="../../assets/images/nodemenuico.png" alt="" /></div>
<ul class="list" v-if="item.isToggle">
<li @click="handleOpen(index)" v-if="item.type==='scene'">打开</li>
<li @click="handleRename(index)" v-if="item.type!=='scene'">重命名</li>
<li @click="handleDesignatedCover(index)">指定封面</li>
<li @click="handleRemove(index)">移除</li>
</ul>
</li>
</transition-group>
</draggable>
</ul>
45 重命名时,input要自动获取焦点
// 显示编辑输入框
showInput (index) {
this.oldValue = this.listItems[index].name
if (this.listItems[index].type === null) {
this.commomFn(index)
this.$nextTick(() => {
this.$refs['input' + index][0].$refs.input.focus()
})
}
},
46 下拉菜单在空白处单击需要隐藏菜单,在mounted钩子中注册一个事件监听器
mounted () {
document.addEventListener('click', (e) => {
if (e.target.className !== 'hoverBox') {
this.listItems.map(v => {
if (v.isToggle) v.isToggle = false
})
}
})
},
47 zTree树外拖拽,targetNode, moveType只针对树内区域,如果是树外区域返回null
zTreeOnDrop (event, treeId, treeNodes, targetNode, moveType) {
let query = {
'code': treeNodes[0].code,
'folderId': this.folderId,
'name': treeNodes[0].name,
'parentId': treeNodes[0].parentId,
'type': treeNodes[0].type
}
// 如果是把节点拖放到某个区域生成一个元素
if (treeNodes[0].level === 2) {
if (this.folderId) {
// 然后向后端保存数据
this.$http.post(API.SSAP_moveAchievementFolder, query).then(res => {
if (res.object.data === '移动成功') {
this.$parent.getFolderList()
this.$message({ message: res.object.data, type: 'success', duration: 2000 })
} else {
this.$message({ message: res.object.data, type: 'warning', duration: 2000 })
}
})
} else {
this.$message({ message: '成果只能拖入到文件夹内', type: 'warning', duration: 2000 })
}
} else {
// this.$message({ message: '只有type是scene 的才能移', type: 'warning', duration: 2000 })
}
},
48 promise.all 并发请求
handleUseStatus (row) {
this.teamId = row.id
Promise.all([this.$http.get(API.SSAP_getAll, { params: { keyWord: this.keyWord } }), this.$http.get(API.SSAP_getUseTeams, { params: { id: row.id } })]).then(res => {
res[0].object.data.forEach(item => {
item.key = item.id
item.label = item.name
})
this.shuttleBoxData = res[0].object.data
res[1].object.data.forEach(item => {
item.key = item.id
item.label = item.name
})
this.defaultData = res[1].object.data.map(v => v.id)
this.shuttleBoxVisible = true
})
},
49 JSON数据递归生成树结构
let = [{
"regionCode": "G0L0",
"businessLine": null,
"regionName": "总公司",
"id": null,
"regionLevel": 0,
"parentRegionCode": null
}]
function getTree(treeData, parentRegionCode) {
const treeArr = []
for (var i = 0; i < treeData.length; i++) {
var node = treeData[i]
if (node.parentRegionCode === parentRegionCode) {
var newNode = {
id: node.id,
label: node.regionName,
}
temp = getTree(treeData, node.regionCode);
if (temp.length > 0) {
newNode.children = temp;
}
treeArr.push(newNode)
}
}
return treeArr
}
console.log(data.object.data, getTree(data.object.data, null));
50 解决本地调试跨域问题 - 副本.bat (注意一定是.bat后缀文件,关闭浏览器再执行这个脚本)
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir
还没有整理完全,后面有时间继续完善
更多推荐
所有评论(0)