1.通过对象数组中的某一个唯一值找到该元素所在数组的下标
let index = (listData || []).findIndex((item) => item.key === key);
2.select下拉选框多选的时候点击太快，数据请求太频繁导致想要生成的数组在没有清空的情况下就push进去了新的数据而导致数据重复的问题参考文章
// 接口请求的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
});
}
// 页面接口调用
async handleServerProductChartDataBar(filters) {
let response = await getScrapeGroupbyServerProduct(filters)
if(response.data.code===200){
// 情况要赋值的数组
this.serverProductDataAllBar.axisData = [];
// 下面省略赋值过程
}
}
- 修改数组里对象的值后，页面没有重新渲染
// 先把数组克隆一份
const yearList = cloneDeep(this.yearList)
// 然后给对象添加新的属性
yearList.map(item=>{
item.isShowAddCard = false
})
// 在修改，页面就会改变
this.yearList[0].isShowAddCard = true
4.线上环境组件出现问题，测试和本地环境都是好的
当前问题是如图：线上下拉框无法正确点击，并报错
问题.png
- 第一步先看一下本地和测试环境组件的版本是否是一致的，通过排查发现线上版本比较低，这时我进行了版本的升级，但是部署到线上之后还是显示为低版本；
- 第二步寻找为啥线上无法显示最新版本，查看package.json,显示是最新版本，但是当前显示的位置为：devDependencies对象下，在dependencies却没有，通过资料查询及询问后端之前有没有这种情况，后端说需要在dependencies有这个包，于是就npm install 包名称 --save 发现还是没发加在dependencies里，去看了package-lock.json这个文件下对应的包，里面有一个dev:true,把这行删除，然后重新运行npm install 包名称 --save在检查就有了
- 最后重新部署上线发现问题好啦
- 合并多个commit流程
- git rebase -i HEAD~2 合并commit个数
- pick 保留 squash 合并
- 出现下面信息
- image.png
-
修改保存就可以完成合并
image.png
- 多个小数相加，发现准确度不对
可以在两个数相加后加一下精度，(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.相应式数组的方法
1、push() 可以push多个元素 push('aaa','bbb','ccc')
2、pop() 删除数组中的最后一个元素
3、shift() 删除数组中的第一个元素
4、unshift() 在数组最前面添加元素
5、splice() 删除元素/插入元素/替换元素
删除元素：第二个元素传入你要删除几个元素（不传删除后面所有的元素）
替换元素：第二个参数 表示我们要替换几个元素 .splice(1,3,'m','n','l','x')
插入元素：第二个参数传0 并且后面跟上要插入的元素 .splice(1,0,'m','n','l','x')
6、sort 排序
7、reverse 倒序
-
数字添加千位符
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,');
},
