ant-design-v实现tab关键词切换并展示对应的数据内容(根据参数返回指定的内容)

最新推荐文章于 2024-03-20 15:37:00 发布
VIP文章 最新推荐文章于 2024-03-20 15:37:00 发布
阅读量958 收藏 2
点赞数
文章标签： 前端 anti-design-vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62933218/article/details/127855729
版权

1.数据都是mock的，统一在plugins文件夹下新建mock文件夹（用来存放数据），api文件夹（用来发请求）

2.我要实现的是首页的主体部分根据关键词展示不同的数据内容

 @开始的想法是： 

把请求到的数据都放到allInfo[]里面，请求的时候带上参数，告诉后台我需要哪个关键词的文章

 

在api这儿统一发请求并传参

 

Mock接收到请求并根据参数判断返回的数据

最低0.47元/天 解锁文章
红红火火恍恍惚惚1
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
ant-design-vue中将表格同一列内数据排序、数据相同的单元格合并
06-08
ant-design-vue + VUE3,在table中按照某一列名进行排序并将内容相同的列合并； 包含原table数据排序，重组，行合并
vite2.0 + ant Design vue2.0按需加载和更换主题
FORMAT-qi的博客
04-23 3312
随手记录一下 main.ts import { createApp } from 'vue' import Antd from './antd-ui' import App from './App.vue' const app = createApp(App) app.use(Antd) app.mount('#app') antd-ui.ts import { Button, Card, message, notification } from 'ant-design-vue' const co
手把手带你基于ant design pro 5实现多tab页(路由keepalive)
最新发布
fudebao的博客
03-20 1496
前几天在一个前端群里，看到一位群友在吐槽react不支持keepalive，没办法实现多页签，这篇文章就我就用react 基于antd pro 5实现一下这个功能。
第十五章 React使用UI（Ant Design）框架
Etc.End的博客
12-14 1286
Ant Design还是是很重要的。它是一个成熟的前端框架，提供了丰富的组件库，包括按钮、表单、表格、图标、菜单、对话框等等，可以满足各种常见的界面需求。此外，它还支持国际化，可以根据不同的语言和地区自动切换组件的文本和样式。因此，对于前端开发人员来说，学习Ant Design是非常有必要的。它可以帮助你提高开发效率和质量，打造出令用户满意的前端应用。同时，Ant Design的活跃社区和丰富的案例教程也可以帮助你学习和交流。
第六篇【传奇开心果系列】Ant Design Mobile of React 移动应用开发：UI框架39个组件集中讲解和示例代码
jackchuanqi的博客
01-10 589
Ant Design Mobile of React是一个基于React的UI框架，它提供了39个组件，可用于构建移动端的React应用。Ant Design Mobile of React提供了丰富的移动端UI组件，例如按钮、表单、导航、模态框等，这些能够帮助开发者快速构建功能丰富、美观的移动应用。Ant Design Mobile of React还包括一些高级组件，如日期选择器、轮播图等，以满足更多复杂的移动应用需求。这使得Ant Design Mobile of React成为一个非常全面的移动端U
在ui框架的基础上仿造steps步骤条插件,提供时间 原因等操作
陈慕一的博客
01-05 567
项目使用antdesign vue作为ui框架,atv的steps满足不了项目需求, 所以自己在此基础上增加了一些功能,可自定义颜色 内容格式等! 上为实际效果展示, <div class="s_r"> <div class="s_wrap" @tap="topage(index)"> <div class="s_content"> <div style="min-width: 115px">{{ item.submitTi
antd 实现 tab 切换·记
青蛙king的博客
02-24 4963
import { Tabs } from "antd"; import { useEffect, useState } from "react"; import { Link } from "react-router-dom"; import './index.less' const { TabPane } = Tabs; const Header = (props) => { return ( <div className="header-tabs"> ...
ant-design-vue+vite主题切换详细步骤（简单案例）
butcher的博客
11-09 5461
现在越来越多的网站支持主题切换，我们的也要！ 在这，我们要实现两个例子，主题切换与夜间模式！ 主题切换： 夜间模式： 1、准备工作，初始化一个简单的vite项目 安装 ant-design-vue和less yarn add ant-design-vue@next yarn add less --save 因为ant-design-vue是使用less开发的，所以既然用了它，咱最好还是用和它一致的less。 在main.ts中全局引入antd组件与样式 import { createApp }.
tabs切换数据---多个tab页面使用一个data存储数据显示到el-table上,响应慢的请求数据覆盖掉响应快的数据
weixin_43502666的博客
10-15 681
2、当点击tab时可以将前面的请求cancel掉,使用axios中的方法:axios.CancelToken.source()方法会创建一个令牌,为每个tab请求添加入参{cancelToken:axios.CancelToken.source().token},每次点击按钮发送请求前,将存在令牌的请求cancel掉(this.cancelToken.cancel(“请求已取消”)😉。(3)this.$set(this.objData, index, ‘请求的结果’);//为存储结果的对象设置响应式属性。
ant-design-vue Tabs组件使用问题小记
xiaoxiannv666的博客
10-31 1045
ant-design-vue Tabs组件，切换tab重复请求/切换tab缓存组件不请求接口
ant-design-dark-theme:Ant Ant Design的深色主题变量
05-07
$ npm install @ant-design/dark-theme 用法 import darkTheme from '@ant-design/dark-theme' ; // webpack.config.js: less-loader { loader : 'less-loader' , options : { modifyVars : darkTheme , } , } ,...
用于设置ant-design-vue中table组件的列宽可拖拽
08-05
vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽
ant-design-vue-pro：像Pro一样使用Ant Design Vue！
02-05
English | 蚂蚁设计Vue Pro 适用于企业应用程序的即用型UI解决方案，作为Vue样板。 基于 预览： ： 主页： ： 文档： : 变更日志： : 常见问题解答： ： ...git clone https://github.com/vueComponent/ant-
ant-design-draggable-modal:Ant Design的Modal，可拖动
05-02
yarn add ant-design-draggable-modal 注意：您必须使用[email protected]和[email protected]或更高版本。 :hammer: 用法 import React , { useState , useCallback } from 'react' import { Button } from 'antd' ...
【React】归纳篇（十）组件间通信方式之Redux | UI组件AntDesign | Redux-react
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
09-22 1926
react-router4 react-router概览 1、react的一个插件库 2、专门用于实现一个SPA应用 3、基于react的项目都会用到该库 SPA 1、点击页面中的链接不会刷新页面，本身也不会向服务器发送请求 2、点击路由链接时，只会发生页面局部更新 3、数据通过ajax请求，在前端异步展示 4、整个应用只有一个完整页面，该页面由各种组件构成 路由 路由时一个映射关系（k...
HeyUI组件库 | 如何实现在线切换主题
weixin_33938733的博客
11-06 650
目前支持在线切换主题的组件库 如果有更多的，请在下方留言，我会后期补充。 ant-design 目前ant-design支持的切换主题颜色是在页面最下方。 是的，如果你不仔细，你是不知道系统有这个功能的。 然后这里要吐槽一个点，随便切换什么颜色都很卡，因为没有确认按钮，所以随便调一个小颜色，也会去后端请求，值得改进.... ant-design使用的less，和HeyUI是一致的，并且也提供全局l...
【ant design of vue】时间选择器，change事件，传递自定义参数，$event
AAAXiaoApple的博客
03-12 2769
在做项目的时候，碰到了一个问题，使用日期选择器的change事件时，发现只返回两个参数 @change = onchange ,在打印时，只会出现这个两个参数 但是，项目上的是使用数组渲染出多个日期选择器的，如果改变其中一个，需要知道改变的是哪一个， 这时就需要传递一个参数，才能知道改变的是哪一个了。 使用箭头函数，再添加上自己需要的参数 第一种情况（默认有两个参数的） @change=" (date, dateStrings) =>onChange(date, dateStrings, r
Vue 组件封装之 Tab 切换
热门推荐
杏子
07-25 1万+
实战 Vue 第5天:封装一个tab切换组件前言使用现存组件面临的问题封装 tab 组件的思路封装 tab 组件代码总结 前言 以上 tab 切换功能在前端开发中司空见惯。各种现存的组件也随手拈来。在 Vue 中，有配套的 element-ui 组件，也有 vue-ant-design。 element-ui 中 el-tabs 效果如下： vue-ant-design 中 a-tabs 效果...
ant design pro实现tab页切换功能
09-18
Ant Design Pro 中实现Tab页切换功能非常简单，只需要使用 `Tabs` 和 `TabPane` 组件即可。 以下是一个基本的示例代码： ```jsx import { Tabs } from 'antd'; const { TabPane } = Tabs; function callback(key...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值