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>