vue页面使用饿了么UI给tabs标题增加下拉选细化分类操作

最近需要将一个之前实现的tabs页面改造,实现每个tabs页再细化按照不同分类展示,第一反应是给每个tabs页中再增加tabs,思来想去总觉得导致页面很冗余不精简。最后决定使用slot插槽来实现这个需求。

因为业务代码较复杂先用饿了么UI官网的案例对比:

vue页面使用饿了么UI给tabs标题增加下拉选细化分类操作_第1张图片

上面是最基本的tabs页,我的页面实现后是这样:

vue页面使用饿了么UI给tabs标题增加下拉选细化分类操作_第2张图片

 关键代码:

vue页面使用饿了么UI给tabs标题增加下拉选细化分类操作_第3张图片

页面实现就不放了着重说实现效果与方式,改造后的效果是这样:

vue页面使用饿了么UI给tabs标题增加下拉选细化分类操作_第4张图片

每个tabs在鼠标悬停的时候都会展示出更细致的分类,实现方式:

1.代码是在

2.tab-pane的名称在下面插槽中命名,这里去掉就好 

实现如下:



        //tabs的名称在下面插槽中命名,这里去掉就好
        

        //插入内容
          
        //handleAllExamList方法为点击下拉选中内容后刷新页面执行的方法
          
            全部考试
            
              
                {{ menu.label }}
              
            
          
        
       //内容结束
下拉选这里我是写死的,也可以配置成灵活的,随需求来就行

                    
                    

你可能感兴趣的:(前端日常,ui,vue.js,前端,elementui)