获取数据：

  1. const rawData = ref([])
  3.     onMounted(async () => {
  4.       const response = await axios.get('/api/data')
  5.       // 假设返回的数据结构类似：[ [item1], [item2], ... ]
  6.       rawData.value = response.data
  7.     })
  8. 或者：
  10. // 创建响应式数据 fetchList
  11.   const newList = ref([]);
  13.   const getList = async() => {
  14.     // console.log(777721)
  15.     // loading.value = true;
  16.     await getnewsList()
  17.       .then(data => {
  18.         // console.log(777722,data.data.titlelist)
  19.         // 更新newList的值
  20.         newList.value = data.data.titlelist
  21.       })
  22.       .catch((e) => {
  23.         // console.log(777727,e)
  24.         // loading.value = false;
  25.       });
  26.       // console.log(777728)
  27.   }
  29. 其中 getnewsList() 方法为：
  30. import { getnewsList } from "@/api/api";
  31. 其中 /api/api 为：
  32. import axios from "@/utils/axios";
  34. /**
  35.  * news
  36.  */
  37. export function getnewsList(params) {
  38.     return axios({
  39.         url: "/websiteapi/api/base/lists",
  40.         method: "get",
  41.         data: params
  42.     });
  43. }
  44. 其中 /utils/axios 为：
  45. import axios from "axios";
  46. // import store from "@/store";
  47. // import { ElMessage } from "element-plus";
  48. // import {
  49. //     VERSION,
  50. //     MODEL_TEST_VERSION,
  51. //     SERVER_TYPE,
  52. //     AXIOS_TIMEOUT
  54. // } from "@/constant";
  56. // import { switchServerUrl } from "@/utils/index";
  58. /**
  59.  * axios请求拦截器
  60.  * @param {object} config axios请求配置对象
  61.  * @return {object} 请求成功或失败时返回的配置对象或者promise error对象
  62.  **/
  63. axios.interceptors.request.use(config => {
  64.     return config;
  65. }, error => {
  66.     return Promise.reject(error);
  67. });
  69. /**
  70.  * axios 响应拦截器
  71.  * @param {object} response 从服务端响应的数据对象或者error对象
  72.  * @return {object} 响应成功或失败时返回的响应对象或者promise error对象
  73.  **/
  74. axios.interceptors.response.use(response => {
  75.     return response;
  76. }, error => {
  77.     return Promise.reject(error);
  78. });
  80. export default function http(options) {
  81.     // 获取不同环境的请求域名
  82.     const server_url = 'http://192.168.8.15:222';
  84.     let opt = {};
  85.     const method = options.method || "post";
  86.     const url = options.url;
  87.     const data = options.data || {};
  88.     if (!options.url) {
  89.         console.error("url参数缺失");
  90.         return;
  91.     }
  92.     // if (store.getters.token) {
  93.     //     data.sys_token = store.getters.token;
  94.     // }
  95.     if (method == "get") {
  96.         opt = {
  97.             method,
  98.             baseURL: "",
  99.             url: url.indexOf("//") > -1 ? url : (server_url + url),
  100.             params: data,
  101.             timeout: 50000
  102.         };
  103.     } else if (method == "post") {
  104.         opt = {
  105.             method,
  106.             baseURL: "",
  107.             url: url.indexOf("//") > -1 ? url : (server_url + url),
  108.             data, // qs.stringify(data)
  109.             timeout: 50000
  110.         };
  111.     }
  112.     return new Promise((resolve, reject) => {
  113.         axios(opt).then(res => {
  114.             // console.log(77770,res);
  115.             if (res && (res.status === 200 || res.status === 304 || res.status === 400)) {
  116.                 const data = res.data;
  117.                 if (data.code && data.code == 200) {
  118.                     resolve(data);
  119.                 } else if (data.code && (data.code == 101 || data.code == 102 || data.code.error == "您还没有登录")) { // 101请获取权限 102登录失效
  120.                     // ElMessage.error(data.status.error); // 提示错误信息
  121.                     // 登出操作
  122.                     // store.dispatch("user/logout");
  123.                     console.log(data.error);
  124.                 } else {
  125.                     // ElMessage.error(data.status.error || "网络异常，请稍后重试！"); // 提示错误信息
  126.                     reject(data);
  127.                 }
  128.             } else {
  129.                 // ElMessage.error(res || "网络异常，请稍后重试！"); // 提示错误信息
  130.                 reject("[lison]网络异常，请稍后重试");
  131.             }
  132.         }, err => {
  133.             // ElMessage.error(err); // 提示错误信息
  134.             reject(err);
  135.         });
  136.     });
  137. }

接口返回的数据分类：

  1. const categorizedData = computed(() => {
  2.     const result = {}
  3.     for (const group of newList.value) {
  4.       // console.log(777731,group.list)
  5.       // group 本身也是一个数组 [obj1, obj2, ...]
  6.       for (const item of group.list[0]) {
  7.         // console.log(777732,item)
  8.         const category = item.type
  9.         if (!result[category]) {
  10.           result[category] = []
  11.         }
  12.         result[category].push(item)
  13.       }
  14.     }
  15.     // console.log(777735,result)
  16.     return result
  17.   })

动态生成 tab（切换标签项）

  1. const categories = computed(() => Object.keys(categorizedData.value))

当组件挂载、生命周期钩子

  1. const currentCategory = ref('')
  3.   // 当组件挂载时，调用 getList 函数
  4.   // 生命周期钩子
  5.   // 当一个时：onMounted(getList);
  6.   // 当多个时：
  7.   onMounted(async () => {
  8.     // await tabTitle();
  9.     // 在获取数据后调用 newList 函数
  10.     await getList();
  11.     // 默认选中第一个类别tab
  12.     if (categories.value.length > 0) {
  13.       currentCategory.value = categories.value[0]
  14.     }
  15.   });

分页功能

  1. const currentPage = ref(1)
  2.   const pageSize = 4
  3.   function handleTabChange(cat) {
  4.     // console.log('handleTabChange',cat)
  5.     currentCategory.value = cat
  6.     currentPage.value = 1
  7.   }
  8.   const pagedData = computed(() => {
  9.     const allItems = categorizedData.value[currentCategory.value] || []
  10.     const startIndex = (currentPage.value - 1) * pageSize
  11.     const endIndex = startIndex + pageSize
  12.     // console.log('pagedData',allItems.slice(startIndex, endIndex))
  13.     return allItems.slice(startIndex, endIndex)
  14.   })

计算总页数

  1. const totalPages = computed(() => {
  2.     const allItems = categorizedData.value[currentCategory.value] || []
  3.     return Math.ceil(allItems.length / pageSize)
  4.   })

点击文章跳转

  1. const goUrl = (url) => open(url)

前端页面渲染示例

  1. <template>
  2.   <div class="news">
  3.     <y-title en="News updates" cn="新闻动态"></y-title>
  4.     <div class="news-tabs">
  5.       <div class="news-tabs-li" :class="{ 'news-tabs-li-sd': item === currentCategory }" v-for="item in categories" :key="item" @click="handleTabChange(item)">{{ item }}</div>
  6.     </div>
  8.     <div class="news-list">
  9.       <div class="news-list-li" v-for="item in pagedData" :key="item.id" @click="goUrl(item.url)">
  10.         <div class="news-list-li-title">{{ item.title }}</div>
  11.       </div>
  12.     </div>
  14.     <div class="news-navs">
  15.       <button class="news-navs-box" @click="currentPage > 1 && (currentPage = currentPage - 1)">上一页</button>
  16.       <span class="news-navs-box">{{ currentPage }} / {{ totalPages }}</span>
  17.       <button class="news-navs-box" @click="currentPage < totalPages && (currentPage = currentPage + 1)">下一页</button>
  18.     </div>
  19.   </div>
  20. </template>

样式

  1. <style lang="scss" scoped>
  2. .news {
  3.   display: flex;
  4.   flex-direction: column;
  5.   align-items: center;
  6.   margin-top: 120px;
  7.   margin-bottom: 270px;
  8.   &-tabs {
  9.     width: 1360px;
  10.     display: flex;
  11.     margin-top: 65px;
  12.     &-li {
  13.       background: #DCE9FF;
  14.       width: 250px;
  15.       height: 65px;
  16.       display: flex;
  17.       justify-content: center;
  18.       align-items: center;
  19.       border-top-left-radius: 10px;
  20.       border-top-right-radius: 10px;
  21.       margin-right: 15px;
  22.       font-size: 30px;
  23.       font-weight: bold;
  24.       color: #000;
  25.       cursor: pointer;
  26.       transition: all .3s;
  27.     }
  28.     &-li-sd {
  29.       background: #4A7CEE;
  30.       color: #fff;
  31.     }
  32.   }
  33.   &-list {
  34.     background: #FAFBFF;
  35.     height: 300px;
  36.     width: 1360px;
  37.     padding: 50px 60px;
  38.     box-sizing: border-box;
  39.     overflow: hidden;
  40.     &-li {
  41.       font-size: 24px;
  42.       line-height: 24px;
  43.       color: #252525;
  44.       margin-top: 40px;
  45.       cursor: pointer;
  46.       &-url {
  47.         margin-top: 12px;
  48.       }
  49.       &:first-child {
  50.         margin-top: 0;
  51.       }
  52.       &:hover {
  53.         color: #4A7CEE;
  54.       }
  55.     }
  56.   }
  57.   &-navs {
  58.     display: flex;
  59.     margin-top: 20px;
  60.     &-box {
  61.       width: 150px;
  62.       height: 50px;
  63.       background: #DCE9FF;
  64.       border-radius: 10px;
  65.       margin: 0 10px;
  66.       display: flex;
  67.       justify-content: center;
  68.       align-items: center;
  69.       cursor: pointer;
  70.       font-size: 24px;
  71.       &-sd {
  72.         background: #4A7CEE;
  73.         color: #fff;
  74.       }
  75.     }
  76.   }
  77. }
  78. </style>