电商后台管理系统添加编辑和删除商品分类

目录

一 代码

1 修改 Cate.vue

2 修改 element.js

二 效果

三 源码参考

---

一 代码

1 修改 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>
                <el-col>
                    <el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
                </el-col>
            </el-row>
            <!-- 表格 -->
            <!-- selection-type:是否展示复选框
            expand-type：是否为展开行
            show-index:是否显示索引列
            index-text:索引列标题头
            border：是否显示纵向边框
            show-row-hover:是否悬停高亮显示-->
            <tree-table class="tree-table"
                        :data="catelist"
                        :columns="columns"
                        :selection-type="false"
                        :expand-type="false"
                        :show-index="true"
                        index-text="编号"
                        border
                        :show-row-hover="false">
                <!-- 是否有效 -->
                <template slot="isok" slot-scope="scope">
                    <i class="el-icon-success"
                       v-if="scope.row.cat_deleted === false"
                       style="color: lightgreen"></i>
                    <i class="el-icon-error"
                       v-else style="color: red"></i>
                </template>
                <!-- 排序 -->
                <template slot="order" slot-scope="scope">
                    <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
                    <el-tag type="success" size="mini" v-else-if="scope.row.cat_level === 1">二级</el-tag>
                    <el-tag type="warning" size="mini" v-else>三级</el-tag>
                </template>
                <!-- 操作 -->
                <template slot="opt" slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" size="mini"
                               @click="showEditCateDialog(scope.row.cat_id)">编辑
                    </el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeCate(scope.row.cat_id)">
                        删除
                    </el-button>
                </template>
            </tree-table>
            <!-- 分页 -->
            <el-pagination
                    @size-change="handl