电商后台管理系统商品分类参数可选项的添加与删除

最新推荐文章于 2022-11-01 11:34:34 发布

chengqiuming

最新推荐文章于 2022-11-01 11:34:34 发布

阅读量1.1k

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/chengqiuming/article/details/108435978

版权

一代码

1 修改 Params.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-alert title="注意：只允许为第三级分类设置相关参数！" type="warning" :closable=false show-icon>
            </el-alert>
            <!-- 选择商品分类区域 -->
            <el-row class="cat-opt">
                <el-col>
                    <span>商品分类：</span>
                    <!-- 选择商品分类的级联选择框 -->
                    <!-- options :指定数据源-->
                    <!-- props :用来指定配置对象-->
                    <!-- model :选中的父级分类的Id数组-->
                    <!-- change :当选中改变时触发的事件-->
                    <!-- clearable :清空选择-->
                    <el-cascader
                            expand-trigger="hover"
                            v-model="selectedCateKeys"
                            :options="cateList"
                            :props="cateProps"
                            @change="handleChange"
                            clearable
                    >
                    </el-cascader>
                </el-col>
            </el-row>
            <!-- tab 页签区-->
            <el-tabs v-model="activeName" @tab-click="handleTabClick">
                <!-- 添加 动态参数 面板-->
                <el-tab-pane label="动态参数" name="many">
                    <el-button type="primary" size="mini"
                               :disabled="isBtnDisable"
                               @click="addDialogVisible = true"
                    >添加参数
                    </el-button>
                    <!-- 动态参数表格 -->
                    <el-table :data="manyTableData" border stripe>
                        <!-- 展开行 -->
                        <el-table-column type="expand">
                            <template slot-scope="scope">
                                <!-- 循环渲染tag标签 -->
                                <el-tag v-for="(item,i) in scope.row.attr_vals" :key="i" closable
                                        @close="handleClose(i,scope.row)">{
  {item}}
                                </el-tag>
                                <!-- 输入文本框 -->
                                <el-input
                                        class="input-new-tag"
                                        v-if="scope.row.inputVisible"
                                        v-model="scope.row.inputValue"
                                        ref="saveTagInput"
                                        size="small"
                                        @keyup.enter.native="handleInputConfirm(scope.row)"
                                        @blur="handleInputConfirm(scope.row)"
                                >
                                </el-input>
                                <!-- 按钮 -->
                                <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+
                                    New Tag
                                </el-button>
                            </template>
                        </el-table-column>
                        <!-