elementui中的tabs标签页

ELEMENT-TABS标签页中的自定义标签页,怎么设置每行的标签单独点击控制折叠和打开,目前我列表下的标签单击任何一个都一起打开关闭,

打开关闭弹框还是什么东西?

你这是折叠面板都展开了吧

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 你可以看下这个问题的回答https://ask.csdn.net/questions/7494040
  • 我还给你找了一篇非常好的博客,你可以看看是否有帮助,链接:element中的tabs标签页引用其他页面使用
  • 除此之外, 这篇博客: Element tabs自定义content内容/element tabs自定义内容中的 二 通过自定义组件 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
    <!DOCTYPE html>
    <html>
    <head>
        <title>主页</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<!-- 引入VUE -->
    	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <!-- 引入样式 -->
    	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    	<!-- 引入组件库 -->
    	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
    	
    </head>
    <body>
    <div id="app" >
    	<div style="margin-bottom: 20px;">
    	  <el-button
    		size="small"
    		@click="addTab(editableTabsValue2)"
    	  >
    		添加自定义内容为test的tab
    	  </el-button>
    	   <el-button
    		size="small"
    		@click="addTab2(editableTabsValue2)"
    	  >
    		添加自定义内容为test2的tab
    	  </el-button>
    	</div>
    	<el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">
    	 <el-tab-pane
    		key="X"
    		label="名称"
    		name="X"
    	  >
    		 内容
    	  </el-tab-pane>
    	  <el-tab-pane
    		v-for="(item, index) in editableTabs2"
    		:key="item.name"
    		:label="item.title"
    		:name="item.name"
    	  >
    		<test></test>
    	  </el-tab-pane>
    	   <el-tab-pane
    		v-for="(item, index) in editableTabs3"
    		:key="item.name"
    		:label="item.title"
    		:name="item.name"
    	  >
    		<test2></test2>
    	  </el-tab-pane>
    	</el-tabs>
    </div>
    </body>
    <script>
        //注册全局组件
        //加载特征管理列表
    	//var htmlobj=$.ajax({url:'../views/feature/featureAdd.html',options:{accept: 'text/html, text/plain'},async:false});
    	//var html = htmlobj.responseText;
    	//
    	//注册一个特征管理列表组件
    	Vue.component('test', {
    		data: function () {
    			return {
    				form: {
    					name: ''
    				}
    			}
    		},methods:{
    			onSubmit:function(){
    			}
    		},created:function () {
                  //组件被创建的时候调用
    			  //如果该组件通过json引入的,那么可以在父页面将数据放到cookie里面,然后在这里获取
    			  //例如  getcookie(id)
    			  //然后就可以使用这个id  初始化data啦
    		},
    		//template:html 可通过json获取已经定义好的界面
    		template:'<el-row><el-button>我是自定义的组件1,我在tabpanel里面哦</el-button></el-row>'//这里我就做一个简单的演示  我真正使用的时候是使用上面那种json获取的组件内容
    	});
    	
    	Vue.component('test2', {
    		data: function () {
    			return {
    				form: {
    					name: ''
    				}
    			}
    		},methods:{
    			onSubmit:function(){
    			}
    		},created:function () {
                  //组件被创建的时候调用
    			  //如果该组件通过json引入的,那么可以在父页面将数据放到cookie里面,然后在这里获取
    			  //例如  getcookie(id)
    			  //然后就可以使用这个id  初始化data啦
    		},
    		//template:html 可通过json获取已经定义好的界面
    		template:'<el-row><el-button>我是自定义的组件2,我在tabpanel里面哦</el-button></el-row>'//这里我就做一个简单的演示  我真正使用的时候是使用上面那种json获取的组件内容
    	});
    	
    	
     var app = new Vue({
        el:"#app",
    	data:{
    	 editableTabsValue2: 'X',
            editableTabs2: [],
    		editableTabs3: [],
            tabIndex: 2
    	},methods:{
    	  addTab(targetName) {
            let newTabName = ++this.tabIndex + '';
    		//例如  setcookie(id)
            this.editableTabs2.push({
              title: '新建tab内容为自定义组件1',
              name: newTabName,
              content: ''
            });
            this.editableTabsValue2 = newTabName;
          },
    	   addTab2(targetName) {
            let newTabName = ++this.tabIndex + '';
    		//例如  setcookie(id)
            this.editableTabs3.push({
              title: '新建tab内容为自定义组件2',
              name: newTabName,
              content: ''
            });
            this.editableTabsValue2 = newTabName;
          }
        }
     });
    </script>
    </html>
  • 您还可以看一下 徐杨老师的ElementUI入门到实战教程课程中的 Tabs标签页小节, 巩固相关知识点

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^