之前在使用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="https://cdn.jsdelivr/npm/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app" >
<div style="margin-bottom: 20px;">
<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="item.content" style="width:100%;height:800px;border:none;"></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: 'http://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="https://cdn.jsdelivr/npm/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg/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;
//
//注册一个特征管理列表组件
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,
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="https://cdn.jsdelivr/npm/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app" >
<div style="margin-bottom: 20px;">
<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="item.content"></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 = htmlobj.responseText;
//
//注册一个特征管理列表组件
Vueponent('test', {
data: function () {
return {
form: {
name: ''
}
}
},methods:{
onSubmit:function(){
}
},created:function () {
//组件被创建的时候调用
//如果该组件通过json引入的，那么可以在父页面将数据放到cookie里面，然后在这里获取
//例如 getcookie(id)
//然后就可以使用这个id 初始化data啦
},
//template:html 可通过json获取已经定义好的界面 如果有脚手架就更好办啦，直接import然后然道component里面就可以使用啦
template:'<el-row><el-button>内容11111111111111111</el-button></el-row>'//这里我就做一个简单的演示 我真正使用的时候是使用上面那种json获取的组件内容或者import引入
});
Vueponent('test2', {
data: function () {
return {
form: {
name: ''
}
}
},methods:{
onSubmit:function(){
}
},created:function () {
//组件被创建的时候调用
//如果该组件通过json引入的，那么可以在父页面将数据放到cookie里面，然后在这里获取
//例如 getcookie(id)
//然后就可以使用这个id 初始化data啦
},
//template:html 可通过json获取已经定义好的界面 如果有脚手架就更好办啦，直接import然后然道component里面就可以使用啦
template:'<el-row><el-button>内容2222222222222222222</el-button></el-row>'//这里我就做一个简单的演示 我真正使用的时候是使用上面那种json获取的组件内容或者import引入
});
var app = new Vue({
el:"#app",
data:{
editableTabsValue2: 'X',
editableTabs2: [],
tabIndex: 2
},methods:{
addTab(targetName) {
let newTabName = ++this.tabIndex + '';
this.editableTabs2.push({
title: '新建tab内容为自定义组件' + newTabName,
name: newTabName,
content: newTabName%2==0?'test':'test2'
});
this.editableTabsValue2 = newTabName;
}
}
});
</script>
</html>
更多推荐
Element tabs自定义content内容/element tabs自定义内容
发布评论