页面按照时间分组查询 数据 vue java

 分析：

咋一看，是按照时间分组查询，其实这样做，后期需要分页查询的话就会不准

理解：还是按照常规思路去做，分页查询数据，之后在拿到所有数据之后，改变数据结构转换需要的数据

关键代码

后端	

public IPage<MaterialLibraryVO> getList(IPage<MaterialLibraryVO> page, MaterialLibraryDTO materialLibraryDTO) {
		List<MaterialLibraryVO> list = materialLibraryMapper.getList(page, materialLibraryDTO);
		return page.setRecords(list);
	}

    <select id="getList" resultType="org.springblade.modules.tc.materialLibrary.vo.MaterialLibraryVO">
        select * from tc_material_library where is_deleted = 0 and material_choose_type=#{materialLibraryDTO.materialChooseType}
        <if test="materialLibraryDTO.originalName!= null and materialLibraryDTO.originalName!=''">
            AND original_name like concat(concat('%', #{materialLibraryDTO.originalName}),'%')
        </if>
        <if test="materialLibraryDTO.ctime!= null and materialLibraryDTO.ctime!=''">
            and ctime=#{materialLibraryDTO.ctime}
        </if>
        <if test="materialLibraryDTO.videoStatus!= null">
            AND video_status=#{materialLibraryDTO.videoStatus}
        </if>
    </select>

前端

      //数据重组（提取方法）
      extracted(data) {
        let ctime = [];
        let dataArray = [];
        let listArray = [];
        if (data.length > 0) {
          for (let i = 0; i < data.length; i++) {
            if (dataArray.indexOf(data[i].ctime) === -1) {
              dataArray.push(data[i].ctime);
            }
          }
        }
        console.log("json", dataArray);

        if (dataArray.length > 0) {
          for (let i = 0; i < dataArray.length; i++) {
            if (data.length > 0) {
              for (let j = 0; j < data.length; j++) {
                listArray = data.filter(item => item.ctime === dataArray[i]);
              }
            }
            ctime.push({"date": dataArray[i], "list": listArray});
          }
        }
        console.log("jso111n", ctime);
        return ctime;
      }

            //重组数据结构
            let ctime = this.extracted(data);
            this.ctime=ctime;

分页在其他地方 ，使用瀑布流