elemment ui tabs实现思路

1.tab切换 时每次想后台返回一个唯一的name参数，就可以实现tab切换

  <div class="cate">推荐阅读</div>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="最近30天" name="30"></el-tab-pane>
            <el-tab-pane label="本年度" name="365"></el-tab-pane>
            <el-tab-pane label="总排行" name="all"></el-tab-pane>
          </el-tabs>
          <ul>
            <li v-for="(item, index) in recommandList" :key="index">
              <div class="title">
                <a :href="'/post/' + (item.uid || item.id)" target="_blank">
                  <span class="list-index">{{ index + 1 }}</span
                  >{{ item.title }}
                </a>
              </div>
              <div class="excerpt">
                <span class="views el-icon-date"> {{ item.createDate }}</span>
                <span class="views el-icon-view"> 阅读({{ item.views }})</span>
              </div>
            </li>
          </ul>
          <script>
import {
  getRecomListApi4Brower,
} from "../../pages/post/index";
export default {
  props: {},
  data() {
    return {
      recommandList: [],

    };
  },
  computed: {},
  methods: {
 
    async getRecomList(type) {
      let res = await getRecomListApi4Brower({ type });
      if (res) {
        this.recommandList = res.data.slice(0,6) //只展示五条
         console.log("数据",this.recommandList);
      }
    },
    // tab.name唯一标识
    handleClick(tab, event) {
      // console.log(tab, event);
      this.getRecomList(tab.name);
    }
  },
};
</script>

2.如果后台返回的是一个数组对象嵌套子数组数据的结构，可以双层for循环出来直接每一项展示

client.js?06a0:57 [
  {
    children: [
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object], [Object]
    ],
    name: '个人博客',
    id: 23,
    createDate: '2022-08-01T00:08:30'
  },
  {
    children: [ [Object], [Object], [Object] ],
    name: '编码规范',
    id: 22,
    createDate: '2022-04-20T22:18:07'
  },
  {
    children: [
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object]
    ],
    name: '构建工具',
    id: 21,
    createDate: '2022-04-07T23:01:29'
  },
  {
    children: [
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object], [Object]
    ],
    name: '框架组件',
    id: 20,
    createDate: '2022-04-07T22:46:17'
  },
  {
    children: [
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object]
    ],
    name: '技术社区',
    id: 19,
    createDate: '2022-02-12T21:13:32'
  },
  {
    children: [ [Object], [Object], [Object], [Object], [Object], [Object] ],
    name: '常用工具',
    id: 14,
    createDate: '2021-11-14T21:33:35'
  },
  {
    children: [
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object], [Object]
    ],
    name: '资源分享',
    id: 3,
    createDate: '2021-11-06T22:28:43'
  },
  {
    children: [
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object]
    ],
    name: '网络资讯',
    id: 2,
    createDate: '2021-11-06T22:27:51'
  },
  {
    children: [ [Object], [Object], [Object], [Object], [Object], [Object] ],
    name: '开发工具',
    id: 1,
    createDate: '2021-11-06T20:33:06'
  }
]

  <el-tabs :tab-position="tabPosition" style="height: 100%">
              <el-tab-pane
                :label="item.name"
                v-for="(item, index) in list"
                :key="index"
              >
                <!--渲染-->
                <div class="child-cate">
                  <div
                    class="cate-item"
                    v-for="(it, ix) in item.children"
                    :key="ix"
                  >
                    <el-card shadow="always">
                      <div class="title">
                        <a :href="it.url" target="_blank"> {{ it.title }}</a>
                      </div>
                      <div class="content">{{ it.content }}</div>
                    </el-card>
                  </div>
                </div>

              </el-tab-pane>
            </el-tabs>
            <script>
import { getListApi } from "./api";

export default {
  data() {
    return {
    };
  },
  async asyncData({ query, store, $axios }) {
    let res = await getListApi({});
    console.log("@@@woaonio",res.data)
    return {
      list: res.data,
    };
  },
};
</script>