Element tabs自定義content內容/element tabs自定義內容
阿新 • • 發佈：2018-12-02
之前在使用Element-ui的tabs標籤頁的時候，content內容只能是html內容和字串，所以在使用element自定義標籤(比如按鈕<el-button>，表格<el-table>)的時候會出現直接顯示字串的樣子，所以我選了一個折中的辦法，先定義一個el-tab-pane，然後在此基礎上面新增，雖然效果最後也達到啦，但是還是有點小問題，那就是新增標籤不是出現在最後的，如果有哪位大神知道的話，還請指導下，謝謝！
其它說明：我沒有搭建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.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)" > 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.com' }); 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.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>