黑马vue实战项目-（五）参数列表组件的开发

最新推荐文章于 2024-01-20 17:28:29 发布
最新推荐文章于 2024-01-20 17:28:29 发布
阅读量665 收藏 8
点赞数
分类专栏： # 前端小案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42349568/article/details/108807216
版权

一，创建组件，配置路由，实现基本布局：

在这里插入图片描述

<template>
	<div>
		<!-- 面包屑导航区 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
		  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
		  <el-breadcrumb-item>参数列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图区域 -->
		<el-card>
			<!-- 警告提示框 -->
			 <el-alert
			    title="注意:只允许为第三级分类设置相关参数!"
			    type="warning" 
				:closable="false" 
				show-icon>
			  </el-alert>
			  <!-- 选择商品分类区域 -->
			  <el-row class="cat_opt">
				  <el-col>
					  <span>选择商品分类:</span>
					  <!-- 选择商品分类的级联选择框 -->
					  
				  </el-col>
			  </el-row>
		</el-card>
	</div>
</template>

二，发送请求，获取所有列表的数据

在这里插入图片描述

created(){
			this.getCateList()
		},
		methods:{
			//获取所有的分类的数据列表
			async getCateList(){
				const{data:res}=await this.$http.get('categories')
				if(res.meta.status!==200)return this.$message.error(res.meta.msg)
				this.$message.sucess(res.meta.msg)
				this.cateList=res.data
			},
		}

三，创建选择商品分类的级联选择框

 <!-- 选择商品分类的级联选择框 -->
					  <el-cascader
					      v-model="selectedKeys"
					      :options="cateList"
					      :props="cascaderProps"
					      @change="handleChange"
						 ></el-cascader>

//选中级联选择框时发生
			handleChange(){
				//它只能选中第三级
				this.addcatForm.cat_pid=this.selectedKeys[this.selectedKeys.length-1]
				this.addcatForm.cat_level=3
			}

实现的效果：
在这里插入图片描述

四，实现tabs导航栏

<!-- tabs导航栏 -->
			  <el-tabs v-model="activeName" @tab-click="handleTabClick">
				  <!-- 添加动态参数的面板 -->
			      <el-tab-pane label="动态参数" name="first">
					  <el-button type="primary" size="mini" :disabled="isBtnDisables">添加参数</el-button>
				  </el-tab-pane>
				  <!-- 添加静态属性的面板 -->
			      <el-tab-pane label="静态属性" name="second">
					  <el-button type="primary" size="mini" :disabled="isBtnDisables">静态属性</el-button>
				  </el-tab-pane>
			  </el-tabs>

computed:{
			//因为要么不选中,要么选中三级,所以:
			isBtnDisables(){
				if(this.selectedKeys.length!==3)return true
				return false
			}
		}

五，获取参数列表

对应的接口文档：
在这里插入图片描述

			//选中级联选择框时发生
			handleChange(){
				this.getParamsData()
			},
			//tab便签点击事件
		  handleTabClick(tab, event) {
			  this.getParamsData()
		  },
		  //获取对应参数的列表数据(静态/动态)
		  async getParamsData(){
			  //它只能选中第三级
			  this.addcatForm.cat_pid=this.selectedKeys[this.selectedKeys.length-1]
			  this.addcatForm.cat_level=3
			  //根据所选分类的id,和当前所处的面板,获取对应的参数
			  const {data:res}=await this.$http.get(`categories/${this.cateId}/attributes`,{
			  	params:{sel:this.activeName}
			  })
			  if(res.meta.status!==200)return this.$message.error(res.meta.msg)
		  }

然后渲染参数列表：

<!-- tabs导航栏 -->
			  <el-tabs v-model="activeName" @tab-click="handleTabClick">
				  <!-- 添加动态参数的面板 -->
			      <el-tab-pane label="动态参数" name="many">
					  <el-button type="primary" size="mini" :disabled="isBtnDisables">添加参数</el-button>
				<!-- 动态表格区域 -->
					   <el-table
						  :data="manyTableData"
						  border
						  stripe
						  style="width: 100%">
					  <el-table-column type="expand"></el-table-column>
					  <el-table-column type="index"></el-table-column>
					  <el-table-column
					     prop="attr_name"
					     label="参数名称">
				        </el-table-column>
				         <el-table-column
						label="操作">
						<template slot-scope="scope">
							<el-button type="primary" icon="el-icon-edit" size="mini">搜索</el-button>
							<el-button type="danger" icon="el-icon-delete" size="mini">s删除</el-button>
						</template>
						</el-table-column>
				</el-table>
				  </el-tab-pane>
				  <!-- 添加静态属性的面板 -->
				  <el-tab-pane label="静态属性" name="only">
					  <el-button type="primary" size="mini" :disabled="isBtnDisables">添加属性</el-button>
				   <!-- 静态表格区域 -->
					   <el-table
						  :data="onlyTableData"
						  border
						  stripe
						  style="width: 100%">
						  <el-table-column type="expand"></el-table-column>
						  <el-table-column type="index"></el-table-column>
						  <el-table-column
							prop="attr_name"
							label="属性名称">
						  </el-table-column>
						  <el-table-column
							label="操作">
							<template slot-scope="scope">
								<el-button type="primary" icon="el-icon-edit" size="mini">搜索</el-button>
								<el-button type="danger" icon="el-icon-delete" size="mini">s删除</el-button>
							</template>
						  </el-table-column>
						</el-table>
				  </el-tab-pane>
			  </el-tabs>

六，添加动态参数对话框

要实现的效果如下：
在这里插入图片描述
第一步：先把对话框建立出来，点击添加参数，则会弹出这个对话框：
为了让添加属性和添加参数都复用这个对话框。就需要使用到计算属性：
在这里插入图片描述
相关数据：
在这里插入图片描述

计算属性：
在这里插入图片描述

七，发起请求，完成参数/属性的添加

具体的接口文档如下：
在这里插入图片描述
在这里插入图片描述

八，修改参数的对话框

对话框写好的效果：
在这里插入图片描述
但是还需要把对应的数据填充到这个对话框中，这个时候，就需要利用作用域插槽获取对应的数据，然后绑定到这里来。
再发起请求，完成参数的更改，对应的接口文档是：
在这里插入图片描述
在这里插入图片描述
对应函数：
在这里插入图片描述

九，删除参数

在这里插入图片描述

		  //删除属性/参数
		  async removeParaById(id){
		  	//弹窗询问是否删除数据
		  	const confirmResult=await this.$confirm('此操作将永久删除该参数, 是否继续?', '提示', {
		  	          confirmButtonText: '确定',
		  	          cancelButtonText: '取消',
		  	          type: 'warning'
		  	        }).catch(err=>err)
		  	//如果用户确认删除，则返回字符串confirm
		  	//如果用户确认取消，则返回字符串cancel
		  	if(confirmResult!=='confirm')return this.$message.info("已经取消了删除")
		  	const{data:res}=await this.$http.delete(`categories/${this.cateId}/attributes/${id}`)
		  	if(res.meta.status!==200)return this.$message.error(res.meta.msg)
		  	this.$message.success(res.meta.msg)
		  	this.getParamsData()
		  }

十，参数的展开标签 绘制

在这里插入图片描述
在这里插入图片描述
可以看到，每行的数据存在这里面，并且是通过空格分开的。
想要使用，则需要用空格做一次分割。得到一个数组：
在这里插入图片描述
然后把这里的数据渲染到页面上：

//  //tag标签的事件显示input
		  showInput(val) {
		  	val.inputVisible = true;
			//$nextTick方法的作用.当页面上的元素被重新渲染之后,才执行这里面回调函数的代码
			//在这里,是变成input函数之后,再获取焦点
		  	this.$nextTick(_ => {
			//文本框自动获得焦点
		  	  this.$refs.saveTagInput.$refs.input.focus();
		  	});
		    },
		  //tag标签的事件,把添加的标签显示出来,并保存到数据库
		   async handleInputConfirm(val) {
				//如果输入的字符串全是字符,则清空输入框
				if(val.inputValue.trim().length ===0){
					val.inputValue=''
					val.inputVisible=false
					return
				}
				//如果没有return,则需要做后续处理
				let inputValue = val.inputValue;
				if (inputValue) {
				 //发起请求,添加新的标签
				  val.attr_vals.push(val.inputValue.trim())
				  val.inputValue=''
				  val.inputVisible=false
				  //发起请求,保存本次参数到数据库
				  const{data:res}=await this.$http.put(`categories/${this.cateId}/attributes/${val.attr_id}`,{
				  	attr_name:val.attr_name,
				  	attr_sel:val.attr_sel,
					attr_vals:val.attr_vals.join(' ')
				  })
				 if(res.meta.status!==200)return this.$message.error(res.meta.msg)
				 this.$message.success(res.meta.msg)
				 //这里不需要重新刷新,一旦重新刷新,下拉菜单就会收起来
				}
			},
			//删除对应的tag标签
			async closeTag(i,val){
				//这个splice会修改原数组,所以修改完成之后,发起请求,就可以完成删除了.
				val.attr_vals.splice(i,1)
				//发起请求:将对attr_vals的操作保存到数据库中
				const{data:res}=await this.$http.put(`categories/${this.cateId}/attributes/${val.attr_id}`,{
				 	attr_name:val.attr_name,
				 	attr_sel:val.attr_sel,
					attr_vals:val.attr_vals.join(' ')
				 })
				 if(res.meta.status!==200)return this.$message.error(res.meta.msg)
				 this.$message.success('删除标签成功')
			}

对应的html结构：

 <el-table-column type="expand">
						<template slot-scope="scope">
						  		<el-tag closable v-for="(item,i) in scope.row.attr_vals" :kye="i"
								@close="closeTag(i,scope.row)"
								> {{item}} </el-tag>
								<el-input
								  class="input-new-tag"
								  v-if="scope.row.inputVisible"
								  v-model="scope.row.inputValue"
								  ref="saveTagInput"
								  size="small"
								  @keyup.enter.native="handleInputConfirm(scope.row)"
								  @blur="handleInputConfirm(scope.row)"
								>
								</el-input>
								<el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
						  </template>
					  </el-table-column>

十一，参数列表功能完成，提交到远程仓库

笑道三千
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 项目实战五 参数管理 商品列表
m0_55170432的博客
05-26 406
过滤器 时间过滤!! // 定义一个时间的过滤器 Vue.filter('dateFormat', function(originVal) { const dt = new Date(originVal) const y = dt.getFullYear() // padStart 方法的使用， 如果 字符串不足两位，则去前面添加 0 const m = (dt.getMonth() + 1 + '').padStart(2, '0') const d = (dt.getDate()
黑马vue实战项目-（六）商品列表组件的开发
weixin_42349568的博客
09-28 1595
一，创建新的git分支和组件，完成基本的页面结构布局 二，发起请求获取商品列表数据 对应的接口文档如下：
vue组件间的参数传递过程,vue传递参数的几种方法
神器榜
09-12 1752
原理：设置一个专用的的全局变量模块文件，模块里面定义一些变量初始状态，用exportdefault暴露出去，在里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时，引入该模块便可。全局变量模块文件：文件：constserverSrc='';constuserSite="中国钓鱼岛";
【VUE项目实战】44、渲染静态属性和动态参数的Tab
程序猿之洞
04-04 5488
接上篇《43、参数管理模块基本结构搭建》 上一篇我们完成添了参数管理模块的基本结构编写，并实现了商品分类的级联选择。本篇我们来渲染静态属性和动态参数的Tab页签。 一、实现Tab页签切换 这里我们需要用到一个新的ElementUI组件，名为“Tabs标签页”： 它的基本用法就是实现不同页签之间的切换。下面是官网针对上图效果的示例代码： <template> <el-tabs v-model="activeName" @tab-click="handleClick"> ..
黑马程序员_大事件项目笔记3_首页部分
weixin_52534056的博客
11-22 834
黑马程序员_大事件项目笔记3-首页部分的笔记
黑马Element-UI+Vue实战项目电商管理系统后台项目源码
最新发布
02-23
通过这个项目，你可以学习到如何使用Vue.js和Element-UI进行项目搭建、组件化开发、状态管理以及前后端交互。同时，理解并掌握这些技术对于开发复杂的Web应用至关重要。实践中，你可以运行项目，查看不同组件的实现...
阶段五：Vue.js项目实战资料.zip
06-24
在这个“阶段五：Vue.js项目实战资料.zip”中，我们能够找到关于使用Vue.js进行实际项目开发的详细资源，特别是针对一个名为“黑马头条”的社交媒体项目。这个压缩包包含了两个主要部分，即“阶段五：社交媒体-黑马...
Vue.js前端开发实战-源代码.zip
07-07
通过学习和实践这个实战项目，你将能够熟练掌握Vue.js的开发流程，理解组件设计模式，掌握状态管理和路由原理，同时提升项目构建和优化的能力。在实际工作中，这些技能将使你能够构建高效、可维护的前端应用。
VUE实战项目【电商管理端】后台数据库SQL文件
10-03
综上所述，这个Vue实战项目不仅涉及前端Vue.js的应用，还涵盖了后端数据库的设计与管理。mydb.sql文件是整个电商管理系统的基石，它定义了数据模型，支撑着前端的各种交互和功能实现。通过深入理解这些知识点，...
Vue.js前端开发实战-PPT.rar
07-10
这份“Vue.js前端开发实战-PPT”教学资料将深入探讨Vue.js的核心概念和技术，帮助你掌握这一前沿技术。 1. **Vue.js核心概念**： - **虚拟DOM（Virtual DOM）**：Vue.js使用虚拟DOM来提高性能和效率，减少对实际...
黑马vue电商后台管理系统总结
m0_67403188的博客
03-10 3974
vue电商后台管理系统-阶段总结 上个月把这个项目做完简单整理了一下文档，和大家交流分享一下 一、项目技术栈 前端 前端采用 vue cli 脚手架搭建框架，使用 element UI 美化项目结构 环境依赖（开发依赖，运行依赖） 富文本编辑器 nprogress加载进度条 echarts图表展示 第三方http库 axios 后端 后端是已经写好了的，采用 express 搭建的 API 服务，返回的数据是 JSON 格式的数据，只需要导入数据库，并配置一下数据库信息，就可以跑起来了，
vue.js的基本框架搭建以及菜单栏的切换
qq_70172010的博客
01-20 538
注意：具体的需自己配置，菜单的内容根据实际情况实现即可！
黑马VUE学习笔记（附带项目天气预报和音乐播放器所有源码）
m0_67403076的博客
03-10 1720
文章目录 黑马VUE学习笔记—后端小白入门（附带项目天气预报和音乐播放器所有源码） 感谢黑马！ 01第一个vue程序 02el挂载点 el是用来设置Vue实例挂载（管理）的元素 1.vue的作用范围 在el命中的元素内部可以被渲染 Vue会管理el选项命中的元素及其内部的后代元素 2.是否可以选用其他的选择器 3.是否可以设置其他的dom元素 03data 数据对象 1.Vue中用到的数据定义在data中 2.data中可以写复杂类型的数据 3.渲染复杂类型数据时，遵循js的语法即
antd-vue菜单选中
abc_ABC123A的博客
06-30 4151
antd-vue菜单选中 进入antd-vue的官网，我们可以直接在导航菜单组件参考文档中找到所有的答案，剩下的只是用我们的逻辑思维把官方提供的API文档串起来即可！ 1.关于菜单选中 1.属性配置 2.事件配置 一般存在的需求： 1.登录成功，自动选中默认的菜单 1.点击菜单，选中对应的菜单 2.由路径直接访问，选中对应的菜单 具体实现： 对于第一种需求，直接使用属性defaultSelectedKeys即可，比如：:defaultSelectedKeys="['/index/home'] 对于第二种
el-tabs选项卡切换时判断是否切换
qq_29124867的博客
05-07 2089
1、给el-tabs加click事件和离开属性before-leave <el-tabs v-model="activeName" @tab-click="handleTabClick" :before-leave="beforeLeave"></el-tabs> 2、记录离开之前的tab值 data(){ return { activeName:'1', oldActiveName:'' } } beforeLeave(activeNam
黑马 大事件项目 笔记
weixin_63681863的博客
08-28 8923
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F2HPDqHw-1693121279346)(assets/image-20230706205300370.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rOOMivHe-1693121279346)(assets/image-20230706210947086.png)]
vue 组件传参 详解
Dark_programmer的博客
02-24 2041
一、父子组件传值 在项目里，每个组件都是独立的，那么在进行调用的时候，该如何向子组件进行参数的传递呢？ 方法一、 关键词：props、$emit 父组件向子组件进行传值 如图所示为父组件，黄色框里是编写需要传递的参数；蓝色框里是为了在父组件里使用子组件而进行的声明；红色框里是为关键。:parentMsg="msg"parentMsg是一个传递参数的变量名，可随意编写。前面接一个冒号是v-bind的...
原生js实现tab栏切换效果
歌谣的博客
04-07 891
我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注小歌谣一起学习前后端知识 运行效果 首先我们来看一下原生js实现的效果 下面就开始直接上代码了 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=.
element ui tabs 修改成hover触发点击
ling_hun_的博客
12-06 4015
Element UI tabs标签页 将点击选择改成鼠标指到就点击（类似hover） 1、单个组件 在el-tabs里添加个ref，删去el-tab-pane里的 ：name绑定，然后在mounted里添加代码 mounted() { this.$nextTick(() => { this.$refs.你在el-tabs定义的ref名称.$refs.nav.$nextTick(() => { // 此时tab的nav才渲染dom 否则拿不到el-tabs__i
快速搭建Vue前端项目：vue-element-admin实践
在本文中，我们将深入探讨如何搭建一个基于Vue和Element-UI的前端项目，以`vue-element-admin`为例，它是一个功能丰富的后台管理前端解决方案。首先，我们需要从GitHub上获取项目源代码，并了解其基本目录结构和关键...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值