Vue项目中常见问题(11)三级联动展示数据业务

最新推荐文章于 2024-06-14 11:03:22 发布
最新推荐文章于 2024-06-14 11:03:22 发布
阅读量757 收藏 1
点赞数
分类专栏： vue前台管理项目 文章标签： github javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46368050/article/details/124775391
版权
本文档介绍了在Vue项目中实现三级联动数据展示的步骤，包括在components/TypeNav/index.vue中触发action，从store的home模块获取数据，以及如何在组件中展示一级、二级和三级分类数据。详细讲解了代码实现过程，并提供了gitee仓库链接以便查阅相关代码。
摘要由CSDN通过智能技术生成

目录

gitee仓库地址:登录 - Gitee.comhttps://gitee.com/CMD-UROOT/sph-project/commits/master

 1.在components/TypeNav/index.vue中派发一个action

 2.由于目前开发的是Home模块

 3.store仓库中的home小仓库中的index.js完整代码

 4.在组件中拿到相应state/home/index.js的数据进行展示

 5.把数据在组件中展示出来

一级分类

二级分类

三级分类

gitee仓库地址:登录 - Gitee.comicon-default.png?t=M4ADhttps://gitee.com/CMD-UROOT/sph-project/commits/master

大家根据上传历史进行查找你需要的代码

注意:养成习惯把项目中的所有全局组件都放到components文件夹里

1.在components/TypeNav/index.vue中派发一个action

 2.由于目前开发的是Home模块

所以找到我们store仓库中的home小仓库中的index.js:

打印得到的结果是:

 3.store仓库中的home小仓库中的index.js完整代码

 

//引入我们封装的api
import { reqCategoryList
最低0.47元/天 解锁文章
学无止境QAQ
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
031Vue3自引用原生方式实现多级数据展示功能-支持树状、级联等需求
阿赛
11-09 376
/ 缓存回显继续保持当前节点选中状态。// 点击更新选中节点。// 判断卡片选中状态。// 命名方便自引用。
Vue项目实战(四) ：动态展示三级联动数据
summer_cloudy的博客
03-23 593
【代码】Vue项目实战(四) ：动态展示三级联动数据。
【vue3】省市区三级联动 —— element-china-area-data
最新发布
lwc18639470699的博客
06-14 496
provinceAndCityData省市二级联动数据,汉字+code regionData省市区三级联动数据 pcTextArr省市联动数据，纯汉字 pcaTextArr省市区联动数据，纯汉字 codeToText是个大对象，属性是区域码，属性值是汉字 用法例如：codeToText[‘110000’] 输出北京市
利用级联选择器实现省市区三级联动【vue + elementUI Plus | uViewUI】
qq_36687211的博客
03-29 7233
利用级联选择器实现省市区三级联动
省市区三级联动（拼接写法）
kallenAB的博客
07-28 3712
省市区三级联动
vue实现省市区三级联动数据
06-20
省市区数据
基于Vue+element UI 的手动创建地区json的三级联动
07-23
在本文中，我们将深入探讨如何基于Vue.js框架和Element UI库实现一个地区三级联动的功能。首先，我们需要了解Vue.js和Element UI的基本概念，以及axios在其中的作用。 Vue.js 是一个轻量级的前端JavaScript框架，它...
vue移动端城市三级联动组件使用详解
10-16
Vue 移动端城市三级联动组件是一种常见的交互设计，用于在移动应用中选择省、市、区等地理信息。在 Vue.js 框架下，实现这种组件涉及到数据绑定、事件处理、动态渲染列表等内容。下面我们将深入探讨该组件的工作原理...
手机移动端3d滑动省市区三级联动
09-17
在移动应用开发中，"手机移动端3D滑动省市区三级联动"是一个常见的功能需求，尤其是在用户填写地址信息时。这个功能旨在提供一种流畅、直观的用户体验，通过3D滚动效果来选择省级、市级和区级行政区域。下面将详细...
二级联动、三级联动
05-25
在IT行业中，二级联动和三级联动是常见的前端交互设计，主要应用于下拉菜单或选择框之间数据的关联性展示。这种设计通常出现在如地区选择、商品分类筛选等场景，用户在选择一级选项后，二级、三级选项会相应更新，...
城市三级联动
10-25
城市三级联动是Web开发中常见的一种交互功能，主要用于地区选择，例如省份-城市-区县的下拉菜单联动。在给定的标题和描述中，我们可以看出这是一个可以直接应用于项目中的简单解决方案。接下来，我们将深入探讨三级...
2020最新全国省市县区三级联动数据库表
11-22
2020最新全国省市县区三级联动数据库表， 2020年最新爬取的淘宝收货地址(菜鸟4级网络)，网络上最新最全的省市县对应表
省市区三级联动完整数据
03-13
从国土资源局官网获取的国家省市区数据，已经导入mysql数据库生成了SQL文件
vue+element-ui 三级联动的使用及回显发送参数踩坑
weixin_73090675的博客
08-14 709
Vue+element-ui依赖组件的三级联动回显踩坑，增改查功能完整流程
vue+element ui 省市县三级联动插入+修改回显
raingsj的博客
07-31 3136
vue element-china-area-data使用详解 城市选择器插件参考：https://www.npmjs.com/package/element-china-area-data 使用前提vue相关配置已准备好 安装 npm install element-china-area-data -S 使用时在scrip中先进行引用在使用,前面代表不同的格式 import { provinceAndCityData, regionData, provinceAndCityDataPlus, regi
Vue3案例详解(四)
柳老师的博客
07-05 396
本章主要介绍使用Vue组件实现数据列表的展现,搜索,排序功能. 其中将会介绍一下几个知识点,具体使用在代码的注释中都比较完善: 1.父组件传值给子组件,defineProps的使用. 2.computed计算属性的使用 3.以下函数的使用 filter(); reduce(); Object.keys(); some(); slice(); sort();
Vue之三级联动
qq_46772005的博客
05-23 5442
vue的三级联动本质上和js的联动是一样的，只不过需要注意一下细节问题 <div id="app"> <selects></selects> </div> <template id="sel"> <div> <select v-model="text" @change="changCity();changCity1()"> <option v-for="(
vue-前端实现省市三级联动选择（elementUI的级联选择器el-cascader）
qq_42221321的博客
09-13 3156
参考链接： emementUI官方介绍 element-china-area-data参考链接 安装 npm install element-china-area-data -S 使用 regionData是省市区三级联动数据（不带“全部”选项） CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText[‘110000’]输出北京市 import { regionData, CodeToText } from "element-china-area-data"; 省
vue三级联动数据存入数据库
07-30
Vue三级联动数据存入数据库的步骤如下： 1. 创建数据库表结构：首先，需要在数据库中创建适当的表结构，以存储三级联动数据。可以创建三个表，分别表示省、市、区级别的数据，每个表包含相应的字段。 2. 前端界面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值