vue 列表数据操作(去重、筛选、赋值)
vue 列表数据操作(去重、筛选、赋值)
·
vue 列表操作
记录前端vue获取到后端传来的列表后如何进行常见操作
一、数据去重
案例:从数据库获取到仪器设备清单列表apparatusList,列表中有“设备名称”这一属性,去除重复的设备名称,另存为列表apparatusListName。
实现代码:
/** 去除重复名称数据 */
uniqueName(arr) {
const res = new Map();
return arr.filter((arr) => !res.has(arr.apparatusName) && res.set(arr.apparatusName, 1));
},
/** 查询仪器设备清单列表(去除重复名称) */
getNameList() {
const _this = this
listApparatus(this.queryParams).then(response => {
_this.apparatusList = response.rows;
this.apparatusListName = this.uniqueName(_this.apparatusList)
});
},
二、数据筛选
案例:从数据库获取到仪器设备清单列表apparatusList,筛去今年已经检校过的数据以及不需要检校的数据,另存为列表apparatusListYear
实现代码:
/** 查询仪器设备清单列表 (去除今年已经检校过的数据,去除不需要检校的数据)*/
getApparatusYearList() {
this.loading = true;
const _this = this;
const nowDate = new Date();
listApparatus(this.queryParams).then(response => {
_this.apparatusList = response.rows;
this.apparatusListYear = _this.apparatusList.filter(function(item){
const time = item.checkDate;//checkData(设备最新检校日期)
const date = new Date(time);
if((item.isNeedCheck !== 1) && (date.getFullYear() !== nowDate.getFullYear())){
//满足isNeedCheck(是否需要检校)为是,并且今年没有检校过
return item;
}
});
this.loading = false;
});
},
三、数据赋值
案例:从数据库获取到固定依据文件列表checkBasisList,其中有时间属性year,为日期型数据,现将其年份提取出来,另存为列表checkBasisListYear
实现代码:
/** 查询固定依据文件列表(处理好年份信息) */
getCheckBasisList() {
this.loading = true;
const _this = this;
listFile({type:16}).then(response => {
_this.checkBasisList = response.rows;
this.checkBasisListYear = _this.checkBasisList;
// console.log(_this.checkBasisList);
// console.log(this.checkBasisListYear);
for (let i in _this.checkBasisList){
this.checkBasisListYear[i].year = new Date(_this.checkBasisList[i].year).getFullYear();
}
// console.log(this.checkBasisListYear);
this.loading = false;
});
},
更多推荐
所有评论(0)