一，先创建一个新的分支
git checkout -b goods_params
推送到云端
第一次推送到这个分支，需要-u 加云端分支的别名
git push -u origin goods_params
二，参数管理相关功能
动态参数是用户可以动态选择的属性
用户只能选择第三级分类。
1，通过路由的形式创建组件
先点击跳转到的空白页面链接，看一下地址粘贴到路由组件的path里，这里不能乱写
{path:'/params',component:Params},
2.设计页面布局，警告的布局去element中粘过来
<div>
<!-- 面包屑导航区 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>商品管理</el-breadcrumb-item>
<el-breadcrumb-item>参数列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片区域 -->
<el-card>
<!-- 警告区域 ，去element里面粘贴 -->
<el-alert title="注意：只允许为第三级分类设置相关参数" type="warning">
</el-alert>
</el-card>
只需要加一个 :closable="false"，就可以把警告后面的叉号去掉
加一个show-icon就能有一个感叹号的属性
3.绘制选择商品分类的区域
放一个el-row
<!-- 选择商品分类区域 -->
<el-row class="cat_opt">
<el-col>
<span>选择商品分类： </span>
<!-- 选择商品分类的级联选择框 -->
</el-col>
</el-row>4.获取商品分类的数据
查看商品分类数据列表API
根据API的请求接口发起请求，并建一个私有数据数组来接收数据
data() {
return {
//商品分类列表
catelist:[]
}
},
created() {
this.getCateList()
},
methods: {
//获取所有的商品分类列表
async getCateList(){
const {data:res}= await this.$http.get('categories')
if(res.meta.status!==200){
return this.$message.error('获取商品分类失败！')
}
this.catelist = res.data
console.log(this.catelist)
}
}
5.渲染商品分类的级联选择框
首先打开element找到级联选择框
选择Hover
<el-cascader expand-trigger="hover" v-model="selectedCateKeys" :options="catelist"
:props="cateProps" @change="handleChange"></el-cascader>expand-trigger="hover"为级联选择框的种类
:options指定数据源，指定刚刚获取到的商品分类列表数据
props是用来配置级联选择框的，命名为cateProps,加上冒号代表属性绑定，在下面对cateProps进行定义
//级联选择框的配置对象
// value:'',用来指定选中的值
// label:'',用来指定看到的值
// children:''用来指定父子节点的传递
cateProps: {
value: 'cat_id',
label: 'cat_name',
children: 'children'
},v-model="selectedCateKeys"把选中的值双向绑定到数组中,并在data里声明
//级联选择框双向绑定到的数组
selectedCateKeys: []@change="handleChange"选择项改变的事件
//级联选择框中选项发生变化，会触发这个函数
handleChange() {
console.log(this.selectedCateKeys)
}6。控制只允许选中三级分类
现在级联选择器123级都允许被分类，如何控制只允许选中三级分类
只需要判断数组的长度，是3，不等于3处于一个未选中的状态。
//级联选择框中选项发生变化，会触发这个函数
handleChange() {
//证明选中的不是三级分类
if(this.selectedCateKeys.length!==3){
this.selectedCateKeys=[]
return
}
//证明选中的是三级分类
console.log(this.selectedCateKeys)
}7.渲染静态属性和动态属性的tabs标签页
在element中粘贴
在最外层包裹了一个容器el-tab-pane
v-model将激活的标签动态内容名称动态的绑定到值的身上
name是为标签起的唯一的名称，会自动绑定到v-model这个属性中
<!-- tabs页标签区 -->
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
</el-tabs>在data中对双向绑定的激活页签默认为第一个
//被激活的页签的名称
activeName:'first'//tab页签点击事件的处理函数
handleTabClick() {
console.log(this.activeName)
}这样会点击第一个的时候会弹出first
8.渲染添加属性的按钮
同时控制添加属性按钮禁用和启用的状态
当没有选中三级分类的时候，处于禁用的状态
动态参数是添加参数，静态属性是添加属性按钮，要分别设计两个按钮
<!-- 添加动态参数的面板 -->
<el-tab-pane label="动态参数" name="first">
<el-button type="primary" size="mini">动态参数</el-button>
</el-tab-pane>
<!-- 添加动态属性的面板 -->
<el-tab-pane label="静态属性" name="second">
<el-button type="primary" size="mini">静态属性</el-button>
</el-tab-pane>先设计好两个按钮，然后再设计禁用
和级联选择器对应的数组有关，如果数组长度为3，证明选中了三级分类，启动，
在行为区加一个计算属性，和三大类平级
computed:{
//如果按钮需要被禁用，则返回true,否则返回false
isBtnDisabled(){
if(this.selectedCateKeys.length !==3){
return true
}
return false
}
}计算属性定义好后，在按钮上加一个属性绑定
是否禁用按钮属性disabled绑定到刚刚的计算属性布尔值的身上
:disabled="isBtnDisabled">添加属性</el-button>
9.根据级联选择的三级分类，和动态还是静态，来获取对应的表格数据
调用的是对应的参数列表的API
解决第一个参数。那么分类的id怎么获取呢
去定义一个计算属性
//当前选中的三级分类的id
cateId(){
if(this.selectedCateKeys.length ===3){
return this.selectedCateKeys[2]
}
return null
}
}第二个参数sel
如果要获取动态属性的参数，需要将sel设计为only,如果是想获取静态属性的参数，设计为
这两个参数是由面板来决定的
如果激活第一个面板，打印的是first,如果是第二个面板，打印的是sconde
我们可以把面板的名称进行改造
<el-tab-pane label="动态参数" name="many">
<el-tab-pane label="静态属性" name="only">
默认需要激活many面板
activeName: 'many'
我们需要在选择项改变的那个时候发起请求
//证明选中的是三级分类
console.log(this.selectedCateKeys)
//根据所选分类的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('获取参数列表失败！')
}
console.log(res.data)
},
//tab页签点击事件的处理函数
handleTabClick() {
console.log(this.activeName)
}现在在面板切换的时候，请求并没有重新发起
从动态参数切换到静态属性，不能发起请求
因为之前获取数据的一系列操作都放在了级联选择框发生改变时的那个函数中
10.只有级联选择器的选择框发生变化时才会获取数据
因此需要将获取数据单独抽取为一个函数，无论是面板切换还是级联发生变化都重新获取数据
//级联选择框中选项发生变化，会触发这个函数
async handleChange() {
this.getParamsData()
},
//tab页签点击事件的处理函数
handleTabClick() {
console.log(this.activeName)
this.getParamsData()
},
//获取参数的列表数据
async getParamsData(){
//证明选中的不是三级分类
if (this.selectedCateKeys.length !== 3) {
this.selectedCateKeys = []
return
}
//证明选中的是三级分类
console.log(this.selectedCateKeys)
//根据所选分类的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('获取参数列表失败！')
}
console.log(res.data)
}需要的时候只需要调用这个函数即可
11现在不管是通过修改级联列表还是切换面板获取到的都是放在res里面存着。
因为页面中要获取到两个不同的表格，静态属性是一个，动态是一个
获取到的数据到底给那个表格使用呢
所以要先判断一下
if(this.activeName=='many'){
this.manyTableData=res.data
}else{
this.onlyTableData=res.data
}把这两个参数声明一下
//动态参数数据
manyTableData:[],
//静态参数数据
onlyTableData:[]这样就分别获取到了数据
进行页面渲染
<!-- 添加动态参数的面板 -->
<el-tab-pane label="动态参数" name="many">
<!-- 添加参数的按钮 -->
<el-button type="primary" size="mini" :disabled="isBtnDisabled">添加参数</el-button>
<!-- 动态参数表格 -->
<el-table :data="manyTableData" border stripe>
<!-- 展开行 -->
<el-table-column type="expand"></el-table-column>
<!-- 索引列 -->
<el-table-column type="index"></el-table-column>
<el-table-column label="参数名称" prop="attr_name"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
<el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<!-- 添加静态属性的面板 -->
<el-tab-pane label="静态属性" name="only">
<el-button type="primary" size="mini" :disabled="isBtnDisabled">添加属性</el-button>
<!-- 静态属性表格 -->
<el-table :data="onlyTableData" border stripe>
<!-- 展开行 -->
<el-table-column type="expand"></el-table-column>
<!-- 索引列 -->
<el-table-column type="index"></el-table-column>
<el-table-column label="属性名称" prop="attr_name"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
<el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-tab-pane>12.渲染添加参数的对话框
可以只写一个文本框
计算一下文本的标题
//动态计算标题的文本
titleText(){
if(this.activeName === 'many'){
return '动态参数'
}
return '静态属性'
}添加单击事件
<el-button @click="addDialogVisible=true" type="primary" size="mini" :disabled="isBtnDisabled">添加属性</el-button>
设计对话框
<!-- 添加参数的对话框 -->
<el-dialog :title="'添加'+ titleText"
:visible.sync="addDialogVisible" width="50%">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="addDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addDialogVisible= false">确 定</el-button>
</span>
</el-dialog>在data中控制默认是隐藏的
//控制添加对话框的显示与隐藏
addDialogVisible:false页面展示图
然后在对话框里设计表单
粘贴过来“表单验证”
<!-- 表单 -->
<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px">
<el-form-item :label="titleText" prop="attr_name">
<el-input v-model="addForm.attr_name"></el-input>
</el-form-item>
</el-form>在data中添加
//添加参数的表单数据对象
addForm:{},
//添加表单的验证规则对象
addFormRules:{
attr_name:[
{required: true, message:'请输入参数名称', trigger: 'blur'}
]
}还需要添加关闭重置事件
13添加数据到后台
先查看API接口
883
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
