vue.js - element-ui tabs组件内的 content属性怎么使用组件而不是字符串。
本文介绍了vue.js - element-ui tabs组件内的 content属性怎么使用组件而不是字符串。的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
element-ui tabs组件内的 content属性怎么使用组件而不是字符串。
解决方案
我的需求是点击菜单栏,tabs中添加一个tab:
菜单中格式为:
将写好的组建放到menus里面;
tabs组件:
<el-tabs v-model="TabsValue" type="card" closable @tab-remove="removeTab">
<el-tab-pane v-for="(item, index) in Tabs" :key="item.name" :label="item.title" :name="item.name">
<tab-component :index="index" :name="index"></tab-component>
</el-tab-pane>
</el-tabs>
js:
data() {
return {
uniqueOpened: true,
menus: menus,//import 进来的
TabsValue: '',
Tabs: [],
}
},
addTab(menu, index) {
var exist = false
for (var i = 0; i < this.Tabs.length; i++) {
if (menu.name == this.Tabs[i].name) {
exist = true
break
}
}
if (exist == true) {
this.TabsValue = menu.name
return
}
this.Tabs.push({
title: menu.name,
name: menu.name,
content: menu.component
})
var _this = this
var tabComponent = Vue.component('tab-component', {
render: function (h) {
var comp = _this.Tabs[this.index].content
return h(comp)
},
props: {
index: {
type: Number,
required: true
}
}
})
// this.$router.push(menu.url)
this.TabsValue = menu.name
}
结束,不知道还有没有好的办法。。。
这篇关于vue.js - element-ui tabs组件内的 content属性怎么使用组件而不是字符串。的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文