Mint-ui+Element-ui tab-container实现tab与滑动级联

柔光的暖阳◎ 2022-09-03 00:23 147阅读 0赞

<div class="tab-nav">
    				<el-radio-group v-model="radio" size="mini" @change="tabchange">
    					<el-radio-button v-for="(item,index) in nav" :label="item">{
       {item}} 
                        </el-radio-button>				 
    				</el-radio-group>	
    			</div>
                <mt-tab-container v-model="activeName" :swipeable='true'>
    			  <mt-tab-container-item id="tab-container1">
    			    菜单1    
    			  </mt-tab-container-item>
    			  <mt-tab-container-item id="tab-container2">
    			    菜单2  
    			  </mt-tab-container-item>
    			  <mt-tab-container-item id="tab-container3">
    			    菜单3
    			  </mt-tab-container-item>
    			</mt-tab-container>
    
    data(){
          return {
           nav:['菜单1','菜单2','菜单3'],
    	   radio:'菜单1',
    	   activeName: 'tab-container1',
          }
        },
    
    tabchange(value){
    		this.radio=value;  
    		if(this.radio==this.nav[0]){
    			this.activeName='tab-container1';
    		}else if(this.radio==this.nav[1]){
    			this.activeName='tab-container2';
    		}else{
    			this.activeName='tab-container3';
    		}
    	  },
    
     watch: {
    	    activeName:function (newValue) {
    			if(newValue=='tab-container1'){
    				this.radio=this.nav[0];
    			}else if(newValue=='tab-container2'){
    				this.radio=this.nav[1];
    			}else{
    				this.radio=this.nav[2];
    			}
    	    },
        }

发表评论取消回复

表情：

评论列表（有 0 条评论，147人围观）

还没有评论，来说两句吧...

相关阅读

相关 mybatis实现级联查询一对一

接口形式 package com.hspedu.mapper; import com.hspedu.entity.Person;

系统管理员/ 2024年03月24日 14:58/ 0 赞/ 92 阅读

相关 Ajax案例---实现级联列表

目录 Ajax案例---实现级联列表代码： select.html List.java 效果： -------------------- Ajax案例---实

痛定思痛。/ 2024年03月22日 17:21/ 0 赞/ 51 阅读

相关 html4如何做滑动tab,swiper4实现移动端导航栏tab滑动切换

swiper4移动端导航栏tab滑动切换效果，供大家参考，具体内容如下效果如图： ![20201016101841397.jpg][] 首先引入swiper的css和j

秒速五厘米/ 2022年10月06日 11:43/ 0 赞/ 209 阅读

相关 Mint-ui+Element-ui tab-container实现tab与滑动级联

<div class="tab-nav"> <el-radio-group v-model="radio" size="mini" @change="t

柔光的暖阳◎/ 2022年09月03日 00:23/ 0 赞/ 148 阅读

相关 easyUI的combobox实现级联

先简单介绍下combobox： easyUI重写了select，取而代之的是combobox，有如下几种方式可以创建一个combobox 1、使用select标签，并加上c

本是古典何须时尚/ 2022年08月12日 00:11/ 0 赞/ 190 阅读

相关 AJAX实现级联列表，入门级实现方式

直接贴代码吧，前台代码用js语言实现 <script type="text/javascript"> var xmlHttp; functio

我不是女神ヾ/ 2022年08月08日 19:56/ 0 赞/ 223 阅读

相关嵌套与级联

嵌套语句，在一个语句中又包含一个语句，如一个if语句里含有多个if语句。else总是与最近的那个if匹配。级联: If-else if if(exp1) st1;

傷城~/ 2022年05月31日 11:13/ 0 赞/ 199 阅读

相关 voinc+vue实现级联选择

需求： vonic中实现级联选择 <!DOCTYPE html> <html> <head> <title>下拉框</title>

川长思鸟来/ 2022年05月21日 01:52/ 0 赞/ 210 阅读

相关 Ajax实现级联

级联代码： //一级下拉框 var categoryLevel1 = $("categoryLevel1"); //拿到一级下拉框元素

秒速五厘米/ 2022年03月26日 02:40/ 0 赞/ 286 阅读

相关 hibernate的关联与级联

什么是关联(association) 1、关联指的是类之间的引用关系。如果类A与类B关联，那么被引用的类B将被定义为类A的属性。 2、关联的分类：关联可以分为一对一、

- 日理万妓/ 2021年12月20日 07:39/ 0 赞/ 288 阅读