vue + iview 项目实践总结 【完】

一直想把一大篇的总结写完、写好，感觉自己拖延太严重还总想写完美，然后好多笔记都死在编辑器里了，以后还按照一个小节一个小节的更新吧，小步快跑?，先发出来，以后再迭代吧。

最近我们参与开发了一个（年前了）BI项目，前端使用vue全家桶，项目功能基本开发完成，剩下的修修补补，开发过程还算顺畅，期间遇到好多问题，也记录了一下，发出来一起交流，主要是思路，怎么利用vue给的API实现功能，避免大家在同样的坑里待太长时间，如果有更好实现思路可以一起交流讨论??。

前后端分离形式开发，vue+vueRouter+vueX+iviewUI+elementUI，大部分功能我们都用的iviewUI，有部分组件我们用了elementUI，比如表格、日历插件，我们没接mock工具，接口用文档的形式交流，团队氛围比较和谐，三个PHP三个前端，效率还可以，两个前端伙伴比较厉害，第一次使用vue，就承担了90%的开发工作任务，我没到上线就跑回家休陪产假了，特别感谢同事们的支持，我才能回家看娃。

前端其实不太复杂，但是只要用vue开发基本上都会遇到的几个问题，比如菜单组件多级嵌套、刷新后选中当前项、

涉及几个点，表格表头表体合并、文件上传、富文本编辑器、权限树等等。

项目介绍

系统的主要功能就是面向各个部门查看报表数据，后端同学们很厉害，能汇总到一个集团的所有数据，各种炫酷大数据技术；

菜单功能：

• 数据看板： 筛选、展示日期和表格分页
• 业务报表： 报表类型，日期筛选、表格分页
• 数据检索： 筛选项联动、表格分页
• 损耗地图： 筛选项、关系图插件
• 展开分析： 筛选项、分类、卡片、表格
• 系统信息： 版本发布、步骤条、富文本编辑
• 数据源上传： 手动上传、表格展示
• 权限管理： 用户管理、角色管理（权限菜单配置）

项目预览图：

对勾为已更新。

• 1. 使用v-if解决异步传参
• 2. 使用$refs调用子组件方法
• 3. 组件递归实现多级菜单
• 4. 使用watch监听路由参数重新获取数据
• 5. 页面刷新后Menu根据地址选中当前菜单项
• 6. 使用Axios统一状态码判断、统一增加token字段
• 7. 点击左侧菜单选中项点击刷新页面
• 8. 使用Axios.CancelToken切换路由取消请求
• 9. 使用element的table组件实现 表头表体合并
• 10. iview的Menu组件+vuex实现面包屑导航
• 11. iview上传组件手动上传与富文本编辑器接入
• 12. 使用cheerio获取表格数据
• 13. keep-live组件缓存
• 14. 让数据保持单向流动（不要在子组件中操作父组件的数据）

1. 使用v-if解决异步传参组件重绘

大部分的交互的流程都是 “ajax请求数据=>传入组件渲染”，很多属性需要异步传入子组件然后进行相关的计算，如果绑定很多computed或者watch，性能开销会很大，而且有些场景并不需要使用computed和watch，我们只需要在最初创建的时候获取一次就够了。

如下gif例子,点击上方TAB后重新刷新折线组件：

<mapBox v-if="mapData" :data="mapData">mapBox>
复制代码

let This = this
// setp1 重点
this.mapData = falsethis.$http
.post('/api/show/mapcondition',{key:key,type:type})
.then(function(response){
// setp2 重点this.mapData = response.data
})
复制代码

有时候会出现DOM元素与数据不同步，可以使用使用其他方式让DOM强刷

- setTimeou
- $forceUpdate()
- $nextTick()
- $set()
复制代码

2. 使用$refs调用子组件方法

有时候会涉及到父组件调用子组件方法的情况，例如，iview的Tree组件暴露出来的getCheckedAndIndeterminateNodes方法，详见官网文档link。

<Tree v-if="menu" :data="menu" show-checkbox multiple ref="Tree">Tree>
复制代码

let rules = this.$refs.Tree.getCheckedAndIndeterminateNodes();
复制代码

3. 组件递归实现多级菜单

递归组件用的很多，我们的左侧菜单还有无限拆分的表格合并，都用到了递归组件，详见官网链接link。

效果图：

大致思路就是先创建一个子组件，然后再创建一个父组件，循环引用，拿左侧菜单说明，代码如下，数据结构也在父组件中。

<template><Menu width="auto"theme="dark":active-name="activeName":open-names="openNames"@on-select="handleSelect":accordion="true"><template v-for="(item,index) in items"><side-menu-itemv-if="item.children&&item.children.length!==0":parent-item="item":name="index+''":index="index">side-menu-item><menu-item v-else:name="index+''":to="item.path"><Icon :type="item.icon" :size="15"/><span>{{ item.title }}span>menu-item>template>Menu>
template><script>
import sideMenuItem from '@/components/Menu/side-menu-item.vue'
export default {name: 'sideMenu',props: {activeName: {type: String,default: 'auth'},openNames: {type: Array,default: () => ['other','role','auth']},items: {type: Array,default: () => [{name : 'system',title : '数据看板',icon : 'ios-analytics',children: [{ name : 'user', title : '用户管理', icon : 'outlet',children : [{ name : 'auth', title : '权限管理1', icon : 'outlet' },{ name : 'auth', title : '权限管理', icon : 'outlet',children:[{ name : '334', title : '子菜单', icon : 'outlet' },{ name : '453', title : '子菜单', icon : 'outlet' }]}]}]},{name : 'other',title: '其他管理',icon : 'outlet',}]}},components: {sideMenuItem},methods: {handleSelect(name) {this.$emit('on-select', name)}}
}
script>
复制代码

<template><Submenu :name="index+''"><template slot="title" ><Icon :type="parentItem.icon" :size="10"/><span>{{ parentItem.title }}span>template><template v-for="(item,i) in parentItem.children"><side-menu-itemv-if="item.children&&item.children.length!==0":parent-item="item":to="item.path":name="index+'-'+i":index="index+'-'+i">side-menu-item><menu-item v-else:name="index+'-'+i"  :to="item.path"><Icon :type="item.icon" :size="15" /><span>{{ item.title }}span>menu-item>template>Submenu>
template><script>
export default {name: 'sideMenuItem',props: {parentItem: {type: Object,default: () => {}},index:{}},created:function(){}
}
script>
复制代码

4. 使用watch监听路由参数重新获取数据

很多菜单项都只是入参不一样，是不会重新走业务逻辑的，我们就用watch监听$router，如果改变就重新请求新的数据。

export default {watch: {'$route':'isChange'},methods:{getData(){// Do something},isChange(){this.getData()},}
}
复制代码

5. 刷新：根据地址选中当前菜单项

页面刷新后左侧菜单的默认选中项就和页面对应不上了，我们用$router的beforeEnter方法做判断，根据地址获得路由的key（每一个路由都有一个key的参数），储存到localStorage中，然后菜单组件再从localStorage中取出key，再遍历匹配到当前选项目，比较冗余的是我们要在beforeEnter中获取一遍菜单数据，然后到菜单组件又获取一次数据，请求两次接口。

step1 router.js中设置beforeEnter方法，获得地址栏中的key 存储到localStoragestep2 菜单组件取出localStorage中key，递归匹配
复制代码

6. Axios统一状态码判断、统一增加token字段

Axios的interceptors方法有request和response两个方法对请求的入参和返回结果做统一的处理。

axios.interceptors.request.use(function (config) {let token = localStorage.getItem('token')if(token== null && router.currentRoute.path == '/login'){// 本地无token,未登录 跳转至登录页面router.push('/login')}else{if(config.data==undefined){config.data = {"token":token}}else{Object.assign(config.data,{"token":token})}}return config
}, function (error) {iView.Message.error('请求失败')return Promise.reject(error)
})
axios.interceptors.response.use(function (response) {if(response.hasOwnProperty("data") && typeof response.data == "object"){if(response.data.code === 998){// 登录超时 跳转至登录页面iView.Message.error(response.data.msg)router.push('/login')return Promise.reject(response)}else if (response.data.code === 1000) {// 成功return Promise.resolve(response)} else if (response.data.code === 1060){ //数据定制中return Promise.resolve(response)}else {// 失败iView.Message.error(response.data.msg)return Promise.reject(response)}} else {return Promise.resolve(response)}}, function (error) {iView.Message.error('请求失败')// 请求错误时做些事return Promise.reject(error)
})
复制代码

7. 点击左侧菜单选中项点击刷新页面

测试同学提出bug，左侧菜单选中后，再次点击选中项没有刷新，用户体验不好，产品同学一致通过，我们就用野路子来解决了。 给菜单组件设置on-select事件，点击后存储当前选中项的path，每次执行当前点击的path和存储的path做对比，如果一致，跳转到空白页，空白页再返回到当前页，实现假刷新，注：不知道是router.push有节流控制还是怎么回事，不加setTimeout不管用。

handleSelect(name) {let This = thisif((this.selectIndex == 'reset') || (name == this.selectIndex)){// 点击再次刷新setTimeout(function function_name(argument) {This.$router.push({path: '/Main/about',query: {t: Date.now()}})},1)}this.selectIndex = namethis.$emit('on-select', name)
},
复制代码

created(){let This = thissetTimeout(function function_name(argument) {This.$router.go(-1);},1)
}
复制代码

8. 使用Axios.CancelToken切换路由取消请求

有一部分情况是切换路由时，只改变参数，在“4. 使用watch监听路由参数重新获取数据”中提到过，还有一部分功能的接口数据返回的特别慢，会出现切换菜单后，数据才加载出来，需要增加切换菜单后取消原来的请求，代码注释中 setp1、2、3为顺序

export default {data(){return {// setp1 创建data公共的source变量 source:''                }},created:function(){// 获取搜索数据this.getData()},watch:{'$route':'watchGetSearchData',},methods:{getData(){// setp2 请求时创建source实例 let CancelToken = this.$http.CancelTokenthis.source = CancelToken.source();},watchGetSearchData(){// setp3 切换路由时取消source实例 this.source.cancel('0000')this.getData()this.$http.post('/api/show/map',data,{cancelToken:this.source.token}).then(function(response){})}}
}
复制代码

9. element的table组件实现 表头表体合并

我们项目用到的的组件表格有两种，一种用iview的table，带操作按钮的表格，支持表头跨行跨列，另一种element的table组件，纯数据展示，支持表头和标题的跨行跨列。

element的table组件支持表头标题合并，我们定义数据结构包含三部分，表头、表体、表体合并项。 表头直接使用递归组件嵌套就可以了，表体数据直接扔给table组件，合并通过cellMerge方法遍历合并项数据遍历合并，代码如下。

数据结构

data:{historyColumns:[  // 表头数据{"title": " ","key": "column"},{"title": "指标","key": "target"},{"title": "11/22","key": "11/22"},{"title": "日环比","key": "日环比"},{"title": "当周值","key": "当周值"},{"title": "上周同期","key": "上周同期"},{"title": "周环比","key": "周环比"},{"title": "近7日累计","key": "近7日累计"},{"title": "当月累计","key": "当月累计"}],histories:[  // 表体数据{"target": "在售量","11/22": 912,"日环比": "-","当周值": 912,"上周同期": 0,"周环比": "100%","近7日累计": 912,"当月累计": 912,"column": "基础指标"},{"target": "-在售外库车量","11/22": 29,"日环比": "-","当周值": 29,"上周同期": 0,"周环比": "100%","近7日累计": 29,"当月累计": 29,"column": "基础指标"}],merge:[  // 表体合并项{"rowNum": 0,"colNum": 0,"ropSpan": 1,"copSpan": 4},{"rowNum": 4,"colNum": 0,"ropSpan": 1,"copSpan": 27}]
}
复制代码

表体合并说明： 表格有cellMerge方法，每一td在渲染时都会执行这个方法，在cellMerge里遍历merge数据，根据cellMerge的入参行、列定位到td，如果是要合并的表格，则return出要合并的行数和列数，如果在合并的范围内，则要return [0,0]，隐藏当前td。

比如要把A、B、C、D，merge的数据rowNum为A的行、colNum为A的列、ropSpan为2、copSpan为2，在cellMerge方法中，如果坐标为A的单元格，return ropSpan和copSpan，如果坐标为B、C、D则要return [0,0]隐藏，否则会出现表格错乱。

merge方法代码：

// 表格合并主方法  row:行数组  column:列数据  rowIndex、columnIndex行列索引
cellMerge({ row, column, rowIndex, columnIndex }) {let This = this;if(This.configJson){for(let i = 0; i < This.configJson.length; i++){let rowNum = This.configJson[i].rowNum   // 行let colNum = This.configJson[i].colNum   // 列let ropSpan = This.configJson[i].ropSpan // 跨列数let copSpan = This.configJson[i].copSpan // 跨行数if(rowIndex == rowNum && columnIndex == colNum ){// 当前表格index 合并项return [copSpan,ropSpan]// 隐藏范围内容的单元格// 行范围 rowNum <= rowIndex && rowIndex < (rowNum+copSpan)// 列范围 colNum <= columnIndex && columnIndex < (colNum+ropSpan)}else if( rowNum <= rowIndex && rowIndex < (rowNum+copSpan) && colNum <= columnIndex && columnIndex < (colNum+ropSpan) ){return [0,0]}}}}复制代码

**表头合并说明：**element和iview的表头合并数据格式可以一样，都是递归形式，区别是iview的table组件直接把数据扔给组件就可以了，而element需要自己封装一下表头。

// 子组件