VUE:实现模块分类展示数据列表

简介

项目中,会有一个模块展示多个类别的数据,点某一个标题只展示相关的内容。

具体实现

<template>
  <div>
    <div class="classifyToolBox">
      <div class="flexRowStart classifyToolBar">
        <div v-for="(item, index) in classifyToolData" :key="index" class="classifyToolBtn" :class="[currentIndex === index ? 'page-select' : '']" @click="clickFun(index)" >{{item}}</div>
      </div>
      <div class="classifyToolListBody">
        <div>这里是{{classifyToolData[currentIndex]}}的数据</div>
<!--        展示当前所选中分类标题对应的分类列表数据-->
        <div v-for="(item, index) in classifyToolList[currentIndex]" :key="index" class=""></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: -1, // 选中的文章模块的类别的index,默认-1
      classifyToolData: ["分类一", "分类二", "分类三", "分类四"], // 模块分类
      classifyToolList: [], // 模块N个分类对应的N个数据列表
      classifyToolPageInfo: [
        { pageSize: 10, pageIndex: 1, isHaveMoreData: true },
        { pageSize: 10, pageIndex: 1, isHaveMoreData: true },
        { pageSize: 10, pageIndex: 1, isHaveMoreData: true },
        { pageSize: 10, pageIndex: 1, isHaveMoreData: true }
      ] // 模块分类的分页查询条件
    };
  },
  methods: {
 	// 操作:点击文章模块分类标题
    clickFun(index) {
      this.currentIndex = index;
    },
    // 1.查询:模块的分类
    getToolClassifyDataFun() {
      let params = {};
      this.$_http.get(this.$_API.GET_HOME_CLASSIFY_TOOL, { params }).then(res => {
        this.classifyToolList = [];
        if (res.data) {
          this.classifyToolData = res.data;
          this.classifyToolData.forEach(item => {
            if (item.keyID) {
              this.classifyToolList.push([]);
            }
          });
          // 默认查询第一个分类对应的列表数据
          this.getToolClassifyListFun(this.classifyToolData[0].keyID, 0);
        }
      });
    },
    // 2.查询:分类类型对应的数据列表
    getToolClassifyListFun(classifyID, i) {
      if (!this.classifyToolPageInfo[i].isHaveMoreData) {
        return;
      }
      let params = {
        pageSize: this.classifyToolPageInfo[i].pageSize,
        pageIndex: this.classifyToolPageInfo[i].pageIndex,
        classifyID: classifyID
      };
      this.$_http.get(this.$_API.TMC_GET_HOME_CLASSIFY_TOOL_LIST, { params }).then(res => {
        if (res.data) {
          this.classifyToolList[i] = [ ...this.classifyToolList[i], ...res.data.datas ]; // 解构赋值是为了方便之后增加“上拉加载”更多数据的需求
          // 模拟手动点击第一个分类栏
          this.$nextTick(() => {
            this.clickFun(0);
          });
          // 做分页条件查询,如果返回数据的分页信息中 所有的总条数 < 每页条数 * 查询的页码,则每页更多数据可以查询了
          if (res.data.pageInfo.toalRow < res.data.pageInfo.pageIndex * this.classifyToolPageInfo[i].pageSize) {
            this.classifyToolPageInfo[i].isHaveMoreData = false;
          } else {
            this.classifyToolPageInfo[i].pageIndex = this.classifyToolPageInfo[i].pageIndex + 1; // 查询了一夜后,给data里的分页条件加个1,“上拉加载”更多数据的时候方便直接使用
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.flexRowStart {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.classifyToolBox {
  background-color: #fff;
  .classifyToolBar {
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid #DBDEE3;
    .classifyToolBtn {
      border: none;
      font-size: 0.7rem;
      width: 25%;
      text-align: center;
      color: #555658;
      padding: 0.25rem 0;
    }
    .page-select {
      color: #438bef;
      font-size: 0.8rem;
      border-bottom: 1px solid #438bef;
    }
  }
  .classifyToolListBody{
    padding: 0.5em 0.5rem;
    color: #438bef;
  }
}
</style>

最后

觉得有用的朋友请用你的金手指点一下赞,或者评论留言一起探讨技术!

发布了20 篇原创文章 · 获赞 6 · 访问量 826
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览