目录
12·当选中的商品分类不是三级分类，就需要把下面的表格数据也清空
一，添加动态参数或者静态属性
先找到API
参数名称就是对应填写的字符串
attr-vals是可选的，这里先不选
点击添加确定按钮，添加参数，先给确定按钮添加一个事件处理函数
addParams
<el-button type="primary" @click="addParams">确 定</el-button>
//点击按钮，添加参数
addParams(){
this.$refs.addFormRef.validate(async valid =>{
if(!valid) return
const {data:res}=await this.$http.post(`categories/${this.cateId}/attributes`,{
attr_name:this.addForm.attr_name,
attr_sel:this.activeName
})
if(res.meta.status!==201){
return this.$message.error('添加参数失败')
}
this.$message.success('添加参数成功')
this.addDialogVisible =false
this.getParamsData()
})
}二，渲染修改按钮
1·为编辑按钮绑定一个事件处理函数
<el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditDialog">编辑</el-button>
2·然后直接复制添加的对话框给修改
<!-- 修改参数的对话框 -->
<el-dialog @close="editDialogClosed" :title="'修改' + titleText" :visible.sync="editDialogVisible" width="50%">
<!-- 表单 -->
<el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="100px">
<el-form-item :label="titleText" prop="attr_name">
<el-input v-model="editForm.attr_name"></el-input>
</el-form-item>
</el-form>
<!-- 底部 -->
<span slot="footer" class="dialog-footer">
<el-button @click="editDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="editParams">确 定</el-button>
</span>
</el-dialog>3，添加对话框的显示与隐藏
//控制修改对话框的显示与隐藏
editDialogVisible :false
}4,重置修改的表单操作
//重置修改的表单操作
editDialogClosed(){
this.$refs.editFormRef.resetFields()
}5.写表单的验证对象
//修改的表单数据对象
editForm:{},
//修改表单的验证规则对象
editFormRules: {
attr_name: [
{ required: true, message: '请输入参数名称', trigger: 'blur' }
]
},6.点击按钮展示修改的对话框
//点击按钮，展示修改的对话框
showEditDialog(){
this.editDialogVisible = true
},此时点击编辑可弹出修改对话框
7·需要提前获取到ID参数进行展示到对话框中
路径中包含两个参数，需要向服务器提供两个参数
给编辑按钮添加一个参数，进行传参
<el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row.attr_id)">编辑</el-button>
然后接收
//点击按钮，展示修改的对话框
async showEditDialog(attr_id){
//查询当前参数的信息categories/:id/attributes/:attrId,前面的id是分类的id，后面的id是当前的传参
const {data:res} = await this.$http.get(`categories/${this.cateId}/attributes/${attr_id}`,{
params:{attr_sel:this.activeName}
})
if(res.meta.status !==200){
return this.$message.error('获取参数信息失败')
}
this.editForm =res.data
this.editDialogVisible = true
},现在点击编辑，对话框里就会出现获取到的数据
现在已经完成了参数信息的获取，在点确定的时候需要提交到后台
8·表单的预校验，当校验通过后，发起请求
在请求路径中会包含分类的id和当前参数的id
9·向服务器提交参数
//点击按钮修改参数信息
editParams(){
//获取表单的引用
this.$refs.editFormRef.validate(async valid=>{
if(!valid) return
const {data:res} = await this.$http.put(`categories/${this.cateId}/attributes/${this.editForm.attr_id}`,
{ attr_name:this.editForm.attr_name,
attr_sel:this.activeName}
)
if(res.meta.status !==200){
return this.$message.error('修改参数失败')
}
this.$message.success('修改参数成功！')
this.getParamsData()
this.editDialogVisible = false
})
}现在 就可以完整实现修改操作了
三，完成删除参数
为两个删除按钮绑定一个事件处理函数
传递id,
//根据id删除对应的参数项
async removeParams(attr_id) {
//弹窗询问用户是否删除数据
const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
).catch(err => err)
//此时用户点确定返回的是一个confirm字符串，如果点取消是返回一个错误，如果解决，加一个catch
//修改好错误之后，用户点击取消删除之后返回的是一个字符串cancel
// console.log(confirmResult)
if (confirmResult !== 'confirm') {
return this.$message.info('已取消删除')
}
// console.log('确认了删除')
const { data: res } = await this.$http.delete(`categories/${this.cateId}/attributes/${attr_id}`)
if (res.meta.status !== 200) {
return this.$message.error('删除用户失败')
}
this.$message.success('删除用户成功')
this.getParamsData()
},这样就可以删除成功了
四，渲染tag标签
板式下面的所有可选项都是以空格分隔的，
要想将可选项渲染为一个一个标签的话，首先要将字符串用空格做一个分隔，分隔的结果会得到一个数组，将数组做一个循环，就会得到标签
【思路】将服务器返回的每一项进行一个循环，每循环一次都会拿到一个参数项，立即将参数项上的vals从字符串分隔为一个数组，然后重新进行赋值。这样每一个参数项里面的vals就不是一个字符串了，而是一个数组。然后就可以在展开行中通过循环将数组中的每一项渲染成一个标签。
1，在获取参数的列表数据函数中进行循环，将字符串变成数组
async getParamsData() {
//将字符串变成数组
//将每一项都做一个循环forEach，没循环一次都会拿到一个item，
//每拿到一个item项，都把item.attr_vals这个项用空格做分隔，并重新赋值
res.data.forEach(item=>{
item.attr_vals = item.attr_vals.split(' ')
})
2，在页面中渲染标签，设计一个循环
<!-- 展开行 -->
<el-table-column type="expand">
<template slot-scope="scope">
<el-tag v-for="(item, i) in scope.row.attr_vals" :key="i">{{item}}</el-tag>
</template>所得到的页面效果
3·对标签进行优化，添加关闭按钮，
<el-tag v-for="(item, i) in scope.row.attr_vals" :key="i" closable >{{item}}</el-tag>
4·优化删除空标签
新添加分类即使没有标签也会有一个空的标签显示
需要在分隔空格的时候就给一个判断
item.attr_vals =item.attr_vals ? item.attr_vals.split(' '):[]
5.添加一个文本框，不输入时还可以切换为新增标签
从element里面查找
<template slot-scope="scope">
<!-- 循环渲染Tag标签 -->
<el-tag v-for="(item, i) in scope.row.attr_vals" :key="i" closable>{{ item }}</el-tag>
<!-- 输入的文本框 -->
<el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue"
ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm">
</el-input>
</template>梳理element中的文本框
//文本框失去焦点，或者摁下enter都会触发
handleInputConfirm(){
console.log('ok')
},
//点击按钮，展示文本输入框
showInput(){
this.inputVisible = true
} //控制按钮与文本框的切换显示
inputVisible:false,
//文本框中输入的内容
inputValue:''
6·优化两行数据文本框异显
每渲染一个展开行都共用同一个布尔值，inputvalue
为每一行数据都提供一个单独的inputvalue，在循环的时候分别绑定到自己的这行数据的布尔值中
res.data.forEach(item => {
item.attr_vals =item.attr_vals ? item.attr_vals.split(' '):[]
//控制按钮与文本框的切换显示
item.inputVisible=false,
//文本框中输入的内容
item.inputValue=''
})然后在页面渲染的时候直接用这行数据的inputvalue
<el-input class="input-new-tag" v-if="scope.row.inputVisible" v-model="scope.row.inputValue"
把data中的删除
在按钮的时间处理函数中也做对应修改
<el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
//点击按钮，展示文本输入框
showInput(row){
row.inputVisible = true
}这样每条文本都是独立显示的
7·文本框自动获取焦点
从element中粘过来点击按钮调用的函数，其中三行就是控制自动获取焦点的
//点击按钮，展示文本输入框，
showInput(row) {
row.inputVisible = true
//文本框自动获得焦点$nextTick方法：当页面上元素被重新渲染之后，才会指定回调函数中的代码
this.$nextTick(_ => {
//通过this.$refs的形式获取到页面上的input输入框对象，调用focus函数
this.$refs.saveTagInput.$refs.input.focus();
});
}8.文本框切换按钮显示
当点击按钮的时候会切换回文本框，但现在当文本框失去焦点后不会切换为按钮
应该监听失去文本框焦点的组件
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm">
一个是触发按钮，一个是失去焦点都会触发同一个函数
传递数据
@keyup.enter.native="handleInputConfirm(scope.row)" @blur="handleInputConfirm(scope.row)">
接受数据并关闭显示文本框
handleInputConfirm(row) {
row.inputVisible=false
},9·优化，判断如果输入的是一长段空格的清空是非法数据
在文本框隐藏之前进行一个判断
trim是去除字符串两端的空格
//文本框失去焦点，或者摁下enter都会触发
handleInputConfirm(row) {
//trim是清除输入字符串两端的空格，如果输入的是一串空格，则是非法数据
if(row.inputValue.trim().length===0)
{
row.inputValue=''
row.inputVisible=false
return
}
//如果没有return，则证明输入的内容是合法的，需要做后续处理
},10·提交文本框的内容
但文本框输入的是合法的值之后，会保存在inputValue中
只需要将值push到attr_vals数组中，因为所有的标签都是循环的这个数组创建的
为了防止前后有空格，加一个TRIM
当push后，这个文本框需要隐藏和内容清空
//如果没有return，则证明输入的内容是合法的，需要做后续处理，把输入的值提交到循环标签的数组中
row.attr_vals.push(row.inputValue.trim())
row.inputValue=''
row.inputVisible=false
但现在只是在当前页码进行展示，没有渲染到后台中，当刷新页面后会消失
需要提交到后台
在push完成之后需要发起请求，把数据保存到后台数据库中
注意在提交vals的时候后台保存的是字符串，这里我们还需要用空格把数组拼接成一个字符串
//在push完成之后需要发起请求，把数据保存到后台数据库中
const { data: res } = await this.$http.put(`categories/${this.cateId}/attributes/${row.attr_id}`,
{
attr_name:row.attr_name,
attr_sel:row.attr_sel,
attr_vals:row.attr_vals.join(' '),
}
)
if (res.meta.status !== 200) {
return this.$message.error('修改参数项失败')
}
this.$message.success('修改参数项成功')
},注意，拼接的时候一定要使用空格链接，不然刷新页面后会合并到一个标签里
11·标签的删除
给标签添加一个关闭事件
传递索引和这行数据
<el-tag @close="handleClose(i,scope.row)" v-for="(item, i) in scope.row.attr_vals" :key="i" closable>{{ item }}</el-tag>
//删除对应标签
handleClose(i, row) {
//调用splice进行修改
row.attr_vals.splice(i, 1)
//把修改后的保存到数据库中，操作和上面的一致，因此，把上面的保存代码抽出来写成一个函数，直接调用
this.saveAttrVals(row)
}把保存数据的抽出来写成一个函数
//在push完成之后需要发起请求，把数据保存到后台数据库中
this.saveAttrVals(row)
},
//将对attr_vals的操作，保存到数据库中
async saveAttrVals(row) {
//在push完成之后需要发起请求，把数据保存到后台数据库中
const { data: res } = await
this.$http.put(`categories/${this.cateId}/attributes/${row.attr_id}`,
{
attr_name: row.attr_name,
attr_sel: row.attr_sel,
attr_vals: row.attr_vals.join(' '),
}
)
if (res.meta.status !== 200) {
return this.$message.error('修改参数项失败')
}
this.$message.success('修改参数项成功')
},12，当选中的商品分类不是三级分类，就需要把下面的表格数据也清空
只要选择项发生变化，就会触发change事件
找到级联选择器的change事件处理函数
在这个函数中会调用获取参数列表数据函数
在这里把many,only进行清空
//证明选中的不是三级分类
if (this.selectedCateKeys.length !== 3) {
this.selectedCateKeys = []
this.manyTableData=[]
this.onlyTableData=[]
return
}13.静态属性和动态的一样，直接粘贴就可以
把展开行的代码直接复制过去
14·提交到仓库
git branch
git status
git add .
git status
git commit =m "完成了分类参数的开发“
git status
git branch
git merge goods_params
git push
扫一扫
4142
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
