0大前提：A系統是vue2+elementui

主要功能： 實現elementui貼近antdesign周選擇器和級聯選器的功能， 造輪子， 各種組件拼接， 使用源碼的api或者樣式早哦輪子

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按鈕