前端工程师工作周报

A系统是vue2+elementui

1.领导让写一个周选择器，类似antd4.x版本的，如下：

ps：为什么强调antd的版本，因为antd4.x在我的A系统中不可用

因此用cursor重写了一个轮子，从div写起，边问ai边改，自取代码，页面效果与路径如下；
https://gitee.com/wang-qianyuan/demo/blob/master/src/componen...

2.实现自定义级联组件

多选，可普通搜索（暂时不用实现远程搜索），需要末尾自定义加上id且蓝色，需要折叠+n的时候默认展示两项，余下的+n，而这些都是antd4.x已有的功能，现在A系统用的elementui上面改造，顺便研读了一下饿了么--级联组件的源码， elemnetui针对下面两个效果不是加个属性写个方法就能实现的：

因此自定义展示区域覆盖，交ai根据你的思路仿级联组件的源码写个大概，自己编写边改，页面效果和路径如下：
src/components/CheckboxTreeTable.vue

组件大概结构如下：

另：单独写了单选级联选择器的组件，自己针对路径展示递归的时候相比ai写的有所优化
src/components/CascaderSelf.vue
可以在父组件调用的时候加一个这个组件，运行下看看效果

3.echart图例系列问题

1.markLine

markLine可以新增一个横穿echart图的0%线条，便于分析哪些数据0以上，哪些0以下；也可以为了强制让0出现，通过设置合理的最大值最小值，让echart自适应计算y轴让0出现，这个方法别人推荐的，我暂时没用

2.xAxis的rotate

横坐标日期过长，原本设置倾斜，但是领导觉得不好看，还是希望横向，横向又会太拥挤展示不全怎么办？同事说需要调整grid间距上面的，其实不用，去掉rotate横向之后，echart会自适应，放不下了，它会隐藏一个或者两个横向坐标去展示

3.tooltip的formate

tooltip的formate可以自定义鼠标悬浮出现的div的文本格式和样式，共有45项，领导希望每列只展示10项，不够就去第二列，以此类推
1.首先得到10个项目的最大高度为230px，设置max-height：230px，每一项的宽度130ps,之间的间距16px也固定
2.然后设置盒子的宽度，（130+16）* Math.ceil(45/10)=730px, 直接给div的style的width赋值
result = <div style=“width:${width} ”
ps:获取盒子dom节点parent，parent.style.width没法实现，因为tooltip渲染是异步的，只能直接给style的width赋值、
3.发现获取不到this的时候一定要改用箭头函数

4.父表折叠展开子表的复选框渲染bug

基本结构如下

页面如下：

bug：子table中有复选框，可多选行进行某操作，操作完更新整个页面的数据，发现再次勾选复选框，无法勾选，或者总复选框的勾选状态错误，或者说其他请求后勾选状态错误
可从下面两个方向解决：
1.折叠展开刷新视图

// 先收起再展开
table.toggleRowExpansion(row, false)
this.$nextTick(() => {
  table.toggleRowExpansion(row, true)
})

2.从主表的原始数据中find查找，触发vue视图更新
查找父表子表的整个数据tableData查找子表的哪一行要更新复选框的状态，而不是直接对传入的row去this.$set(row, 'xxx', true), 即使row是操作的行所在的父的row，也无法更新，层级太深吧

后续优化后的最终解决方案-勾选请求前后加上loading状态触发视图更新+勾选后不请求触发别的请求也一并加上loading状态控制
demo无bug的路径：src/components/CheckBoxExpandTable.vue
demo的bug代码复现，注释掉如下代码即可复现：

demo的bug现象：全选张三子表后，点击任意edit按钮

前端工程师工作周报

1.领导让写一个周选择器，类似antd4.x版本的，如下：

2.实现自定义级联组件