Elementtabs⾃定义content内容elementtabs⾃定义内容
之前在使⽤Element-ui的tabs标签页的时候，content内容只能是html内容和字符串，所以在使⽤element⾃定义标签(⽐如按钮<el-button>，表格<el-table>)的时候会出现直接显⽰字符串的样⼦，对于第⼆种⽅案，会有⼀个⼩问题，就是第⼆个数组移除完的时候，需要⾃⼰写⼀个判断，默认选中上⼀个数组最后⼀个tab，
其它说明：我没有搭建vue 脚⼿架，⽽是直接在html和jsp页⾯使⽤new Vue({})的，请根据⾃⼰实际情况做相应更改。
⼀第⼀种⽅法，通过iframe
<!DOCTYPE html>
<html>
<head>
<title>主页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 引⼊VUE -->
<script src="cdn.jsdelivr/npm/vue/dist/vue.js"></script>
<!-- 引⼊样式 -->
<link rel="stylesheet" href="unpkg/element-ui/lib/theme-chalk/index.css">
js获取json的key和value<!-- 引⼊组件库 -->
<script src="unpkg/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app" >
<div >
<el-button
size="small"
@click="addTab(editableTabsValue2)"
>
add 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"
>
<iframe :src="t" ></iframe>
</el-tab-pane>
</el-tabs>
</div>
</body>
<script>
var app = new Vue({
el:"#app",
data:{
editableTabsValue2: 'X',
editableTabs2: [],
tabIndex: 2
},methods:{
addTab(targetName) {
let newTabName = ++this.tabIndex + '';
this.editableTabs2.push({
title: 'iframe新建⾃定义内容',
name: newTabName,
content: 'www.baidu'
});
this.editableTabsValue2 = newTabName;
}
}
});
</script>
</html>
⼆通过⾃定义组件
<!DOCTYPE html>
<html>
<head>
<title>主页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 引⼊VUE -->
<script src="cdn.jsdelivr/npm/vue/dist/vue.js"></script>
<!-- 引⼊样式 -->
<link rel="stylesheet" href="unpkg/element-ui/lib/theme-chalk/index.css">
<!-- 引⼊组件库 -->
<script src="unpkg/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app" >
<div >
<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 = sponseText;
//
//注册⼀个特征管理列表组件
//注册⼀个特征管理列表组件
Vueponent('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获 });
Vueponent('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,
name: newTabName,
content: ''
});
this.editableTabsValue2 = newTabName;
}
}
});
</script>
</html>
三最好的⽅案也是⾃定义组件
<!DOCTYPE html>
<html>
<head>
<title>主页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 引⼊VUE -->
<script src="cdn.jsdelivr/npm/vue/dist/vue.js"></script>
<!-- 引⼊样式 -->
<link rel="stylesheet" href="unpkg/element-ui/lib/theme-chalk/index.css">
<!-- 引⼊组件库 -->
<script src="unpkg/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app" >
<div >
<el-button
size="small"
@click="addTab(editableTabsValue2)"
>
添加⾃定义内容tab
</el-button>
</div>
<el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">
<el-tab-pane
:key="item.name"
v-for="(item, index) in editableTabs2"
:label="item.title"
:name="item.name"
>
<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="t"></component>
</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 = sponseText;
//
//注册⼀个特征管理列表组件
Vueponent('test', {
data: function () {
return {
form: {
name: ''
}
}
},methods:{
onSubmit:function(){

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。