基于element的场景解决
场景-中断列表选择
场景描述
- 背景
- 基于element的Vue2项目的一个模块中页面1中组件1中使用子组件1，子组件1封装了el-table，开启多选模式，呈现数据。
- 需求
- 在多选选中不同列表项时，满足一定条件不可再选中，如选中24个后，不可再选择。
- 旧版解决方案
- 在点击选中的业务函数中进行if判断，符合中断条件则return。
- 结果
技术背景
方案解决
- 解决思路
- el-table中的选中状态是独立管理的，处理逻辑中的return不干涉UI，不会影响选中状态。
- 回滚思路。当满足中断条件后，手动移除刚刚选中的行。
- 结合el-table的toggleRowSelection方法强制取消选中状态。
- 其他
- 为了保证状态的同步，需要在DOM更新后手动强制取消选中状态。
参考资料
场景-异步数据加载和模板渲染时序
场景描述
- 需求。使用el-form表单。在created中尝试调用API发起异步请求，获取数据，然后模板表单项中显示数据。
- 结果。数据获取前模板已完成渲染。控制台报错。
技术背景
方案解决
- v-if解决
- formData是响应式数据。初始时formData=null，借助v-if判断决定el-form是否使用。在API成功获取数据后，赋值formData，依据响应式和v-if，el-form在模板渲染出异步数据。
- 用户体验优化。loading
参考资料
场景-切换标签页同时复用组件
场景描述
- 设置每个收款主体的支付宝微信等账户，实现增加、修改账户功能。支付宝和微信账户字段有异同。
技术背景
方案解决
- 封装账户详情组件AccountDetail.vue，其中根据v-if、v-else指令和props属性，复用账户详情组件，根据props结合v-if来实现组件级权限控制。
- 封装账户管理组件AccountManagement.vue，使用el-tabs，结合v-if用标签页管理多个账户详情组件。
- 向不同的账户详情组件传递账户名称accountName，辅助实现组件级权限控制。
参考资料
场景-菜单项内部调转后，子菜单保持高亮
场景描述
- el-menu高亮菜单，通过:default-active="$route.path"，根据当前路由高亮菜单项。
- 问题。菜单项的页面内部可以点击按钮，跳转路由，但是跳转的路由不在el-menu的菜单数据中，所以不会高亮。但跳转路由同样属于该菜单项的业务，应该保持该菜单项的高亮。
技术背景
- 时序
- 点击。
- Vue Router执行路由守卫，加载目标组件。
- route.push触发。开始切换路由，route未更新。
- 路由切换完成，$route更新为新路由。
- dispatch更新Vuex。
- 父组件重新渲染。
- 高亮。
- el-menu
- store
方案解决
- 高亮菜单的属性值为store中的数据成员activeMenu。监听路由变化，对于要跳转的路由，判断是否在菜单路由中，若在，则store更新aciveMenu。el-menu根据activeMenu高亮显示当前菜单项。
- 注意
- dispatch和router.push是异步，需要控制时序。故dispatch需要在监听route变化后再更新，确保更新值为最新路由。
参考资料
