2021-10-09

概述：

      tab栏和侧边栏的效果和功能,数据渲染都是运用了element-ui里的组件

1.  tab切换一级菜单低下对应的二级路由,点击子级的时候动态绑定class类名,当满足条件的时候点击的class类名更改,刷新的时候保存当前被选中的状态
2. 筛选也是由一级菜单对应子级的二级菜单,被选中的状态,刷新页面的时候保存状态

 tab渲染代码

        <el-tabs v-model="classifyName" type="border-card">
            <el-tab-pane 
                :label="item.parent_name" 
                v-for='item in classify'
                :key='item.parent_type'
                :name='item.parent_type'>
                <div class="recipe-link">
                 <!-- query传值，把原有的query拿过来  在原有的query新增当前选中的classify的option属性 -->
                    <router-link 
                        :to="{query:{...$route.query,classify:option.type}}" 
                        v-for='option in item.list'
                        :key='option.type'
                        :class="{active:classifyType === option.type }"
                    >
                    <!--判断当前options.type与classifyType是否相等 
                    如果相等就让当前被点击的元素绑定active -->
                    {{option.name}}
                    </router-link>
                </div>
            </el-tab-pane>
        </el-tabs>

侧边栏筛选渲染代码

     <el-container>
            <el-aside width="220px" class="recipe-aside">
                <div class="filter-box">
                    <h4>筛选</h4>
                    <!-- 筛选 start -->
                    <el-collapse v-model="properActiveName">
                        <el-collapse-item
                            v-for='item in propType'
                            :key='item.parent_type'
                            :title="item.parent_name"
                            :name='item.parent_type'
                        >
                            <div class="filter-tags" >
                                <el-tag type="info"
                                    v-for='option in item.list'
                                    :key='option.type'
                                    @click="selectedTag(option)"
                                    :class="{'tag-selected':propertyType[option.title] === option.type}"
                                    >
                                    {{option.name}}
                                </el-tag>
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                    <!-- 筛选 end -->
                </div>
            </el-aside>
        </el-container>

js功能代码:

<script>
import {getClassify, getProperty, getMenus} from '@/service/api';

    export default {
        components: {MenuCard},
        data() {
            return {
                classify:[],    // 存储tab切换的所有数据
                propType:[],    // 存储属性的所有数据
                classifyType:"1-1",     // tab切换的选中项(二级路由)
                classifyName:'1',       // 定义刷新tab时的值(一级路由)
                propertyType:{},        // 存储属性的分类。 例如: {craft:1-4,flavor=2-1}
                properActiveName:[],    // 记录所有的属性分类
            }
        },
        watch: {
            $route: {
                handler(){
                    const {classify} = this.$route.query ;
                    // console.log(this.$route.query,classify)
                    if(classify){
                        // 把存放在classify中的属性取出来，赋值给this.classifyType
                        // 存在当前的选中项里
                        this.classifyType = classify ; // 1-1 二级菜单的值
                        this.classifyName = classify[0] ; //  1 一级菜单的值
                    }
                },
                immediate:true  //立即执行定义的方法
            }
           
        },
        mounted() {
            getClassify().then(({data})=>{
                this.classify = data ;
                // 如果query没有参数的话 给它定义一个初始值，把数据里的第一条一级和二级的给你定义成一个初始值
                //简单来说 如果没有参数的话从后端拿，最后存回到路由里
                if(!this.$route.query.classify){
                    this.classifyType = this.classify[0].list[0].type ; // 1-1
                    this.classifyName = this.classify[0].parent_type ; //  1
                    // 把存回组件的值 存到路由里
                    this.$router.push({
                        query:{
                            classify:this.classifyType,
                            page:1
                        }
                    })
                }
            });
            getProperty().then(({data})=>{
                // console.log(data)
                this.propType = data ;
                const {query} = this.$route ;
                
                this.propertyType = this.propType.reduce((k,item)=>{
                    // item.title : 工艺,难度,口味,人数 
                    k[item.title] = query[item.title] ? query[item.title] : "" ;
                    // console.log(item)
                    if(k[item.title]){
                        this.properActiveName.push(k[item.title][0]) ;
                        // console.log(k[item.title][0],this.properActiveName)
                    }
                    return k ;
                },{})
            })
        },
        methods: {
            selectedTag(val){
                let query = {...this.$route.query}
                // 判断是否点击,如果点击过, 取消  否则, 选中
                if(this.propertyType[val.title] === val.type){
                    this.propertyType[val.title] = "" ;
                    delete query[val.title]
                }else{
                    this.propertyType[val.title] = val.type ;
                    query[val.title] = val.type
                }
                this.$router.push({
                    query
                })
            }
        }
    }
</script>

效果截图：

总结:

tab栏:

 的效果就是点击切换的时候url后面的参数发生改变,子级菜单的元素动态绑定class,刷新页面前选中的状态可以被保存

侧边栏:

一级菜单下的二级菜单也是动态绑定class,可以在未选中和选中之间来回切换的功能,可以保存当前选中的状态。