91.(前端)增加商品分类实现——Cascader中获取参数发送给后端添加数据

1.概述

在上篇文章中，已经实现了弹窗和级联显示目录，本篇文章要对他进行进一步的优化

1.1 Cascader无法选中一级目录问题

1. clearable，设置输入框清空
2. 可通过 props.checkStrictly = true 来设置父子节点取消选中关联，从而达到选择任意一级选项的目的。
3. separator，设置选项分隔符

1.2获取Cascader中选中的值

4. 修改v-model名称selectKeys，通过此名称获取到数据
5. 给定@change一个函数changeSeletor()，当时间变化就触发。
   
   当列表中长度为2时，这个是一级目录。当长度为3时，这是二级目录，且最后为pid。
6. 获取他的pid和level
7. 发送请求

1.2.1测试

1.3 完善显示

1. 在创建@close=“closeCateDialog”
2. 完善关闭函数，具体内容看完整版代码
3. 调用关闭函数，并且需要重新获列表内容

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>