1.希望按照自己的结构完成tabs组件，背后映射element ui的tabs组件。
<!DOCTYPE html >
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/util/go.js"></script>
<script src="../js/util/jquery.min.js"></script>
<script src="../js/util/vue-2.5.9.js"></script>
<script src="../js/util/element-ui.js"></script>
<link rel="stylesheet" href="../css/element-ui.css">
</head>
<body >
<!-- 组件测试-->
<div id="app" style="width: 100vw;height: 100vh;">
<div style="width:500px;height: 200px">
<!--<el-tabs style="width:100%;height:100%;" >
<el-tab-pane>
<con slot="label"><i class="el-icon-date"></i> 我的行程</con>
<con >我的行程</con>
</el-tab-pane>
<el-tab-pane>
<con slot="label"><i class="el-icon-date"></i>houhouhou</con>
<con >houhouh</con>
</el-tab-pane>
</el-tabs>-->
<tabs><con slot="label"><lb data="标签1"></lb><lb data="标签2"></lb><lb data="标签3"></lb></con><con slot="default"><ct data="内容1"></ct><ct data="内容2"></ct><ct data="内容3"></ct></con></tabs>
</div>
</div>
<script>
Vue.component("lb",{
template:"<div>{{data}}</div>",
props:['data']
});
Vue.component("con",{
template:"<div></div>"
});
Vue.component("ct",{
template:"<div>{{data}}</div>",
props:['data']
});
//表格布局
Vue.component('tabs',{
render:function (h) {
var vm=this;
var vslot=[];
//找表头表体插槽
//根据表头表体找表头列与表体列容器并改变html标签
var tabs=[];
if( this.$slots.label&&this.$slots.label.length>0&&this.$slots.label[0].componentOptions.children.length>0&&
this.$slots.default&&this.$slots.default.length>0&&this.$slots.default[0].componentOptions.children.length>0){
var labels=this.$slots.label[0].componentOptions.children;
var defaults=this.$slots.default[0].componentOptions.children;
for(let i in labels){
let labelNode=labels[i];
labelNode.slot="label";
if(defaults[i]){
let defaultNode=defaults[i];
var pane=h("el-tab-pane",{},[labelNode,defaultNode]);
tabs.push(pane);
}
}
}
return h('el-tabs',{
style:{width:"100%",height:"100%"},
},tabs);
}
})
new Vue({
el:"#app",
data:{ }
});
</script>
</body>
</html>
但是结果不对(标签和内容都在内容区出现了)：
