1.概述
在上篇文章中,已经实现了弹窗和级联显示目录,本篇文章要对他进行进一步的优化
1.1 Cascader无法选中一级目录问题
- clearable,设置输入框清空
- 可通过 props.checkStrictly = true 来设置父子节点取消选中关联,从而达到选择任意一级选项的目的。
- separator,设置选项分隔符
1.2获取Cascader中选中的值
- 修改v-model名称selectKeys,通过此名称获取到数据
- 给定@change一个函数changeSeletor(),当时间变化就触发。
当列表中长度为2时,这个是一级目录。当长度为3时,这是二级目录,且最后为pid。 - 获取他的pid和level
- 发送请求
1.2.1测试
1.3 完善显示
- 在创建@close=“closeCateDialog”
- 完善关闭函数,具体内容看完整版代码
- 调用关闭函数,并且需要重新获列表内容
3.效果展示
4.完整代码
<!-- src/components/goods/Cate.vue -->
<template>
<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>
<!-- 新增角色按钮 -->
<el-row :gutter="20">
<el-col :span="2">
<el-button type="primary" icon="el-icon-circle-plus-outline" @click="showAddCateDialog()">
新增分类
</el-button>
</el-col>
</el-row>
<!-- 表格数据的展示——商品分类TreeTable的显示 -->
<el-row>
<tree-table :data="cateList" :columns="columns"
:selection-type="false"
:expand-type="false"
class="tree-table"
border
:show-index="true">
<!-- 定义一个template,做一个插槽,用于获取当前列的信息,给层级分类添加tag标签 -->
<!-- slot:定义名称 slot-scope定义查槽 -->
<template slot="level" slot-scope="scope">
<el-tag v-if="scope.row.level === 1"> 一级分类 </el-tag>
<el-tag v-else-if="scope.row.level === 2" type="success"> 二级分类 </el-tag>
<el-tag v-else type="warning"> 三级分类 </el-tag>
</template>
<template slot="opt" 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>
</tree-table>
</el-row>
</el-card>
<el-dialog title="新增分类" :visible.sync="addCateDialogVisible" width="30%" @close="closeCateDialog">
<el-form :model="addCateForm" :rules="addCateRules" ref="addCateRef" label-width="80px">
<el-form-item label="分类名称" prop="name">
<el-input v-model="addCateForm.name"></el-input>
</el-form-item>
<el-form-item label="父类节点">
<el-cascader
v-model="selectKeys"
:options="catePidlist"
:props="{ expandTrigger: 'hover', label:'name', value:'id', checkStrictly: true }"
@change="changeSeletor"
clearable
separator=">">
</el-cascader>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addCate">确定</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
cateList: [],
columns: [
{ label: '分类名称', prop: 'name' },
{ label: '分类等级', type: 'template', template: 'level' },
{ label: '分类等级', type: 'template', template: 'opt' }
],
addCateDialogVisible: false,
addCateForm: {
name:'',
pid: 0,
level: 1
},
addCateRules: {
name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
},
catePidlist:[],
selectKeys:[]
}
},
created() {
this.getCateList()
},
methods: {
// 获取全部列表,用于展示
async getCateList() {
const { data: resp } = await this.$axios.get('/api/category_list')
if (resp.status !== 200) return this.$msg.error(resp.msg)
this.cateList = resp.data.data
},
// 显示弹窗
showAddCateDialog() {
this.getCatePidList()
this.addCateDialogVisible = true
},
// 点击弹窗的确定按钮触发函数,发送请求
async addCate() {
// console.log(this.addCateForm);
const { data: resp} = await this.$axios.post('/api/category', this.$qs.stringify(this.addCateForm))
if (resp.status !== 200) return this.$msg.error(resp.msg)
this.$msg.success(resp.msg)
this.getCateList()
this.closeCateDialog()
},
// 获取列表前两级
async getCatePidList() {
const { data: resp } = await this.$axios.get('/api/category_list', { params: {level:2}})
console.log(resp.data);
this.catePidlist = resp.data.data
},
// 获取选中的目录级和pid
changeSeletor() {
console.log(this.selectKeys);
if (this.selectKeys.length > 0){
this.addCateForm.pid = this.selectKeys[this.selectKeys.length - 1]
this.addCateForm.level = this.selectKeys.length + 1
}else {
this.addCateForm.pid = 0
this.addCateForm.level = 1
}
},
closeCateDialog(){
// 重新初始化窗口
this.$refs.addCateRef.resetFields()
// 初始化默认值
this.selectKeys = []
this.addCateForm.level = 1
this.addCateForm.pid = 0
// 关闭窗口
this.addCateDialogVisible = false
}
}
}
</script>
<style lang="less" scoped>
.tree-table{
margin-top: 15px;
}
</style>