1.解决bug1

1.1概述

当我们选择分类商品后又清除内容，就会显示数据不完整。原因在于我们创建了一个changeSelector()函数，清除内容会触发函数，函数中又使用了this.getAttribute()，所以要添加一个判断条件，对this.getAttribute()触发。

1.2代码展示

 changeSelector(){
            // console.log(this.selectKeys);
            this.dynamicFlag = true
            this.staticFlag = true
            if (this.selectKeys.length >= 3){
                this.getAttribute()
            }
            else return
        },
        handle

2.解决bug2

2.1概述

当我们选择分类商品后又清除内容，下面的参数依然会存在。需要把保存的静态字符串与动态的清空即可。

2.2代码展示

// 发送变化时触发此函数
        changeSelector(){
            if (this.selectKeys.length < 3){
                this.staticAttr = []
                this.dynamicAttr = []
                return
            }
            // console.log(this.selectKeys);
            this.dynamicFlag = true
            this.staticFlag = true
            this.getAttribute()
        },

3.解决bug3

3.1概述

当我们没有选中数据时，应该把按钮禁用。使用disabled参数，传递一个布尔值去控制。
我们可以在computed下创建一个函数，用于判断什么时候应该显示，再把这个函数绑定到按钮中的变量disabled即可

<el-button type="primary" size="mini" :disabled="isBtnDisabled" @click="addDialogVisible=true">增加参数</el-button>
 computed:{
        titleText(){
            if (this.activeName === 'static') return '静态参数'
            else return '动态参数'
        },
        isBtnDisabled(){
            if (this.selectKeys.length >= 3){
                return false
            }else{
                return true
            }
        }
    }

4.完整代码展示

<!-- src/components/goods/Attribute.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" close-text="知道了">
            </el-alert>
            <el-row>
                <el-col>
                    <span>选择商品分类：</span>
                    <el-cascader 
                        v-model="selectKeys"
                        :options="cateIdList"
                        :props="{ expandTrigger: 'hover', label:'name', value:'id'}" 
                        clearable 
                        separator=" > "
                        @change="changeSelector">
                    </el-cascader>
                </el-col>
            </el-row>
            <!-- Tags展示内容 -->
            <el-row>
                <el-col>
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="静态参数" name="static">
                            <el-button type="primary" size="mini" :disabled="isBtnDisabled" @click="addDialogVisible=true">增加参数</el-button>
                            <el-table :data="staticAttr">
                                <el-table-column type="index"></el-table-column>
                                <el-table-column label="参数名称" prop="name"></el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-button type="success" size="mini">编辑</el-button>
                                        <el-button type="danger" size="mini">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>

                        <el-tab-pane label="动态参数" name="dynamic">
                            <el-button type="primary" size="mini" :disabled="isBtnDisabled" @click="addDialogVisible=true">增加参数</el-button>
                            <el-table :data="dynamicAttr">
                                <el-table-column type="index"></el-table-column>
                                <el-table-column label="参数名称" prop="name"></el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-button type="success" size="mini">编辑</el-button>
                                        <el-button type="danger" size="mini">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                    </el-tabs>
                </el-col>
            </el-row>
        </el-card>
        <el-dialog :title="'添加'+titleText" :visible.sync="addDialogVisible" width="30%" @close="addDialogClose">
            <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="80px">
                <el-form-item :label="titleText" prop="name">
                    <el-input v-model="addForm.name"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addAttr">立即创建</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>

export default{
    data() {
        return {
            cateIdList: [],
            selectKeys:[],
            activeName: 'static',
            staticAttr:[],
            dynamicAttr:[],
            dynamicFlag: false,
            staticFlag: false,
            addDialogVisible: false,
            addForm: {
                name: ''
            },
            addFormRules: {
                name: [{ required: true, message: '请填写参数名称', tigger:'blur'}]
            }
        }
    },
    created() {
        this.getCateIDList()
    },
    methods:{
        // 获取整个列表
        async getCateIDList(){
            const { data: resp } = await this.$axios.get('/api/category_list')
            this.cateIdList = resp.data.data
        },
        // 发送变化时触发此函数
        changeSelector(){
            if (this.selectKeys.length < 3){
                this.staticAttr = []
                this.dynamicAttr = []
                return
            }
            // console.log(this.selectKeys);
            this.dynamicFlag = true
            this.staticFlag = true
            this.getAttribute()
        },
        handleClick(tab, event) {
            // console.log(tab, event);
            
            if (!this.staticFlag && this.activeName === 'static') return
            if (!this.dynamicFlag && this.activeName === 'dynamic') return
            if (this.selectKeys.length < 3) return
            // console.log(this.selectKeys[2]);
            console.log(this.activeName);
            this.getAttribute()
        },
        async getAttribute() {
            const { data: resp } = await this.$axios.get('/api/category/attr_list', {
                params: { cid: this.selectKeys[2], _type: this.activeName}
            })
            if (resp.status !== 200) return this.$msg.error(resp.msg)
            console.log(resp.data);
            if (this.activeName === 'static'){
                this.staticAttr = resp.data
                this.staticFlag = false
            }else{
                this.dynamicAttr = resp.data
                this.dynamicFlag = false
            }
        },
        addDialogClose() {
            this.$refs.addFormRef.resetFields()
        },
        // 添加参数
        async addAttr() {
            // 验证内容是否满足rule
            this.$refs.addFormRef.validate(async valid =>{
                if (!valid) return
                // // 测试：获取表单内容
                // console.log(this.addForm.name);
                // // 测试：获取表单数据的type
                // console.log(this.activeName);
                // // 测试：获取表单数据的id
                // console.log(this.selectKeys[2]);

                // 发送请求
                const { data: resp } = await this.$axios.post(
                    '/api/category/attribute',
                    this.$qs.stringify({
                        cid: this.selectKeys[2],
                        _type: this.activeName,
                        name: this.addForm.name
                    })
                )
                if (resp.status !== 200 ) return this.$msg.error(resp.msg)
                this.$msg.success(resp.msg)
                this.getAttribute()
                this.addDialogVisible = false

            })
        }


    },
    computed:{
        titleText(){
            if (this.activeName === 'static') return '静态参数'
            else return '动态参数'
        },
        isBtnDisabled(){
            if (this.selectKeys.length >= 3){
                return false
            }else{
                return true
            }
        }
    }
}
</script>

<style lang="less" scoped>
    .el-tabs{
        margin-top: 5px;
    }
    .el-cascader{
        width: 300px;
        margin-top: 10px;
    }
</style>

5.效果展示