1.通過對象數(shù)組中的某一個唯一值找到該元素所在數(shù)組的下標
let index = (listData || []).findIndex((item) => item.key === key);
2.select下拉選框多選的時候點擊太快括丁，數(shù)據(jù)請求太頻繁導致想要生成的數(shù)組在沒有清空的情況下就push進去了新的數(shù)據(jù)而導致數(shù)據(jù)重復的問題參考文章
// 接口請求的js文件
import cancelAxios from 'axios';
const CancelToken = cancelAxios.CancelToken;
let cancelGetStatusData;
export function getScrapeGroupbyServerProduct(filter, cancelRequest) {
if (cancelGetStatusData) {
cancelGetStatusData();
}
return service.get(API_CMDB_SCRAPE_GROUPBY_SERVER_PRODUCT, {params: {"filter": JSON.stringify(filter)}},{
cancelToken: new CancelToken(c => {
cancelGetStatusData = c;
})}).then(response=>{
return response
});
}
// 頁面接口調(diào)用
async handleServerProductChartDataBar(filters) {
let response = await getScrapeGroupbyServerProduct(filters)
if(response.data.code===200){
// 情況要賦值的數(shù)組
this.serverProductDataAllBar.axisData = [];
// 下面省略賦值過程
}
}
- 修改數(shù)組里對象的值后九妈，頁面沒有重新渲染
// 先把數(shù)組克隆一份
const yearList = cloneDeep(this.yearList)
// 然后給對象添加新的屬性
yearList.map(item=>{
item.isShowAddCard = false
})
// 在修改溅呢，頁面就會改變
this.yearList[0].isShowAddCard = true
4.線上環(huán)境組件出現(xiàn)問題桥状，測試和本地環(huán)境都是好的
當前問題是如圖：線上下拉框無法正確點擊，并報錯
- 第一步先看一下本地和測試環(huán)境組件的版本是否是一致的灶伊，通過排查發(fā)現(xiàn)線上版本比較低，這時我進行了版本的升級向抢，但是部署到線上之后還是顯示為低版本；
- 第二步尋找為啥線上無法顯示最新版本胚委，查看package.json,顯示是最新版本挟鸠，但是當前顯示的位置為：devDependencies對象下，在dependencies卻沒有亩冬，通過資料查詢及詢問后端之前有沒有這種情況艘希，后端說需要在dependencies有這個包，于是就npm install 包名稱 --save 發(fā)現(xiàn)還是沒發(fā)加在dependencies里硅急，去看了package-lock.json這個文件下對應的包覆享，里面有一個dev:true,把這行刪除，然后重新運行npm install 包名稱 --save在檢查就有了
- 最后重新部署上線發(fā)現(xiàn)問題好啦
- 合并多個commit流程
- git rebase -i HEAD~2 合并commit個數(shù)
- pick 保留 squash 合并
- 出現(xiàn)下面信息
- image.png
-
修改保存就可以完成合并
image.png
- 多個小數(shù)相加营袜，發(fā)現(xiàn)準確度不對
可以在兩個數(shù)相加后加一下精度撒顿，(num1+num2).tofixed(2) - 當點擊一個按鈕，顯示一個下拉列表荚板，想要點擊頁面空白的地方使下拉框隱藏凤壁，首先在該頁面最外層添加點擊事件，來隱藏該元素跪另，但是這樣會導致顯示該下拉列表的按鈕也失效拧抖，所以，需要給點擊顯示下拉列表顯示的按鈕加一個stop,防止點擊事件冒泡
@click.stop="handleShowSelectFunc"
8.ts 語法中E-slint中使用$refs的寫法
(this.$refs.calendar as any).selectShow = '';
- 關閉eslint 校驗：
// eslint-disable-next-line
10.深拷貝
npm i --save lodash
<script src="lodash.js"></script>//全局引入
import { cloneDeep } from 'lodash'; //使用引入
-
form表單中有上傳組件免绿，如何更好去做校驗徙鱼，可參考以下方法
image.png
12.相應式數(shù)組的方法
1、push() 可以push多個元素 push('aaa','bbb','ccc')
2针姿、pop() 刪除數(shù)組中的最后一個元素
3袱吆、shift() 刪除數(shù)組中的第一個元素
4、unshift() 在數(shù)組最前面添加元素
5距淫、splice() 刪除元素/插入元素/替換元素
刪除元素：第二個元素傳入你要刪除幾個元素（不傳刪除后面所有的元素）
替換元素：第二個參數(shù) 表示我們要替換幾個元素 .splice(1,3,'m','n','l','x')
插入元素：第二個參數(shù)傳0 并且后面跟上要插入的元素 .splice(1,0,'m','n','l','x')
6绞绒、sort 排序
7、reverse 倒序
-
數(shù)字添加千位符
image.png
thousands(num) {
const str = num.toString();
const reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
return str.replace(reg, '$1,');
},
