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;
      });
    },
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐