整理Vue项目开发过程中遇到的常见问题1

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

还没有整理完全，后面有时间继续完善