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

1.概述

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

2.操作流程

2.1建立基本的弹窗显示

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

2.2丰富弹窗

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

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

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

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%">
            <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>