1参数管理
1.1 功能介绍
1.2 路由转发
2 参数列表
2.1 基本布局
2.2 添加警告
2.2.1 添加警告
2.2.2 去掉 叉号
2.2.3 添加图标
即:
<el-alert
title="警告提示的文案" type="warning" :closable="false" show-icon>
</el-alert>
2.3 绘制选择分类区域
2.3.1 设置span
2.3.2 获取商品分类数据
我们要获取所有分类,且不需要分页
2.3.3 渲染
实际高度太高
在全局css文件中添加如下样式:(高度可以自行修改)
.el-cascader-panel{height: 200px;}
2.3.4 控制选择范围
只允许选择三级分类,不能只选择一级分类或者二级分类
解决:只需要监听选择器的change事件, 在事件中只用判断数组的长度即可
长度不等于三,证明你选择的不到三级分类
测试:
如果有的分类只有二级分类,没有三级分类。当你选择完二级分类, 输入框清空,不获取数据
现象就是没有选择东西
报错:
3渲染动态参数,静态属性
3.1 tab页使用
activename:'first' 默认展示第一个
@tab-click 点击一下,就会却换一个: 从first 却换到second
<template>
<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-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
activeName: 'second'
};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
}
}
};
</script>
3.2 添加按钮
添加添加按钮, 同时控制他的禁用启用
当你没选择三级分类的时候,他都是禁用的
3.3 动态获取参数列表
3.1 获取数据
id: 三级分类id 定义一个计算属性( 判断是不是三级分类id,是的话取出来。 他有一段逻辑,不能直接获取数据,所以用计算属性)
sel: 切换是静态参数 还是动态参数
调用时机: 三级分类点击出来--》变化的时候
3.4 有个bug
当你切换tab,发现他并没有调用重新接口
因为事件事放在三级分类的change事件,你切换tab,三级分类的change事件并没有改变,所以不会发请求
解决: 在三级分类的change事件, tab的切换事件 都调用该方法
3.5 还有个问题
抽取的方法,不能立马保存到data身上,你不知道是动态参数的返回结果,还是静态属性的返回结果
4渲染动态参数,静态属性
4.1 渲染 动态参数样式
4.2 添加参数,添加属性共用一个弹框
2.1 添加参数的form表单
2.2 取消时候清空input
4.3参数的添加
4.4修改
4.1 根据ID查询数据,显示到编辑框
4.2 编辑
4.5 删除
添加确认框
5 添加参数的配置项
5.1 循环tag项
将每个对象的属性attr_vals 从【字符串】重新赋值成【数组】
注意
空字符串进行分割,他会分割出来东西,
所以要进行判断
item.attr_vals = item.attr_vals ? item.attr_vals.split(' ') : []
对返回结果做处理,记得判空
5.2 按钮和文本框的切换
<!-- 输入的文本框 -->
<el-input
class="input-new-tag"
v-if="inputVisible"
v-model="inputValue"
ref="saveTagInput"
size="small"
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
变量两个:
inputValue:'',
inputVisible:false
方法: 点击变成 编辑框
// 点击按钮显示文本输入框
showInput() {
this.inputVisible = true;
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus();
});
},
handleInputConfirm(){
console.log()
}
点击切换,input太长了,加个样式
.input-new-tag {
width: 90px;
margin: 5px 10px;
vertical-align: bottom;
}
2.1 如上这样写有问题, 要修改都跟着修改了
因为渲染出来的tag 共用一个 inputVisible, inputValue ,
解决: 给【每一行】都提供一个 inputVisible, inputValue ,
在获取参数的时候, 给每一个对象都添加 inputVisible, inputValue ,
2.2 弹出input 框,使光标获得焦点
直接使用有问题,有可能页面的元素还没渲染完,你就去调用focus 就会报错
所以我们要等待一个时机,当页面的元素重新渲染完成之后, 再去获取文本框
showInput(row) {
row.inputVisible = true
// 自动获取焦点
// $nextTick 方法作用: 当页面上的元素被重新渲染之后,才会指定回调函数中的代码
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus()
})
}
2.3 当文本框失去焦点的时候,变成 button
handleInputConfirm(row) {
row.inputVisible = false
}
2.4 优化
失去焦点,恢复到开始的样子
,但是再切换,发现数据还在
我们要把内容清空,否则下一次切换还有
2.5 保存
// 文本框失去焦点和回车触发
handleInputConfirm(row) {
console.log('ok')
if (row.inputValue.trim().length === 0) {
row.inputValue = ''
row.inputVisible = false
return
}
// 如果没有return证明内容合法做后续处理
row.attr_vals.push(row.inputValue.trim())
row.inputValue = ''
row.inputVisible = false
// 需要发送请求,保存
this.saveAttrVals(row)
}
async saveAttrVals(row) {
const { data: res } = await this.$http.put(`categories/${this.cateId}/attributes/${row.attr_id}`, {
attr_sel: this.activeName,
attr_name: row.attr_name,
attr_vals: row.attr_vals.join(' ')
})
if (res.meta.status !== 200) {
return this.$message.error('修改参数项失败!')
}
this.$message.success('修改参数项成功!')
},
2.6 删除
监听tage的close事件, 如果变化, 把这一个从数组vals中剔除, 在调用接口保存数据
<!-- 循环渲染Tag标签 -->
<el-tag closable v-for="(item, index) in scope.row.attr_vals" :key="index" @close="handleClosed(index, scope.row)"> {{ item }}</el-tag>
// Tag标签的删除
handleClosed(index, row) {
row.attr_vals.splice(index, 1)
this.saveAttrVals(row)
},
5.3 解决小问题
当你选择了一个二级分类,没有选三级分类, input清空了,但是下边的内容并没有清空
错位:
只修改一个高度即可