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.完整代码

<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>
            
            <el-row>
                <tree-table :data="cateList" :columns="columns"
                :selection-type="false"
                :expand-type="false"
                class="tree-table"
                border
                :show-index="true">

                
                
                <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148