---

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