90.(前端)增加商品分类显示——Cascader 级联选择器的使用

1.概述

当我们点击新增分类按钮时，应该弹出一个窗口，然后输入内容，实现添加的功能。本次文章，就实现此功能

2.操作流程

2.1建立基本的弹窗显示

1. 创建点击函数showAddCateDialog()
2. 创建

2.2丰富弹窗

1. 创建表单form
2. 创建按钮
3. 给定输入的规则，绑定给对应的输入框

2.3对于选择父类节点，采用选择的方式让用户选择

1. 创建函数，获取父类节点，只需要获取两级目录
2. Cascader 级联选择器，展示内容
3. 传递值给options定义的属性名

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%">
            <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="value" 
                    :options="catePidlist" 
                    :props="{ expandTrigger: 'hover', label:'name', value:'id' }" 
                    @change="handleChange">
                    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: {},
            addCateRules: {
                name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
            },
            catePidlist:[]
        }
    },
    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
        },
        // 
        addCate() {
            console.log(this.addCateForm);
        },
        // 获取列表前两级
        async getCatePidList() {
            const { data: resp } = await this.$axios.get('/api/category_list', { params: {level:2}})
            console.log(resp.data);
            this.catePidlist = resp.data.data
        }
    }
}
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