简介

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

具体实现

<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: 0, // 选中的文章模块的类别的index，默认写-1，暂时写0
      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 }
      ] // 模块分类的分页查询条件
    };
  },
  created() {
    // this.getToolClassifyDataFun();
  },
  methods: {
    // 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([]);
            }
          });
          // 默认查询第一个分类对应的列表数据
          if (this.classifyToolData.length > 0) {
            // 模拟手动点击第一个分类栏
            this.$nextTick(() => {
              this.clickFun(0);
            });
          }
        }
      });
    },
    // 2.查询：分类类型对应的数据列表
    // 操作：点击文章模块分类标题
    clickFun(index) {
      this.currentIndex = index;
      //后面的就是调用接口及返回数据的处理，重点是注意返回数组的赋值及分页查询条件的处理。
      // this.classifyToolPageInfo[index].pageSize = this.initPageInfo.pageSize;
      // this.classifyToolPageInfo[index].pageIndex = this.initPageInfo.pageIndex;
      // this.classifyToolPageInfo[index].isHaveMoreData = this.initPageInfo.isHaveMoreData;
      // let params = {
      //   pageSize: this.classifyToolPageInfo[index].pageSize,
      //   pageIndex: this.classifyToolPageInfo[index].pageIndex,
      //   classifyID: this.classifyToolData[index].keyID
      // };
      // this.$_http.get(this.$_API.GET_HOME_CLASSIFY_TOOL_LIST, { params }).then(res => {
      //   if (res.data) {
      //     this.$set(this.classifyToolList, index, [...res.data.datas]); // 如此即可立即回显到页面上，避免对数组第i个进行赋值的操作。
      //     this.classifyToolPageInfo[index].pageIndex = this.classifyToolPageInfo[index].pageIndex + 1;
      //     if (res.data.pageInfo.totalRow <= res.data.pageInfo.pageIndex * this.classifyToolPageInfo[index].pageSize) {
      //       this.classifyToolPageInfo[index].isHaveMoreData = false;
      //     }
      //   }
      // });
    }
  }
};
</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>

最后

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