河口建设局网站,pc端移动端网站开发,火星wap建站,百度引流免费推广怎么做选项卡组件#xff1a;分隔内容上有关联但属于不同类别的数据集合。 常见于网站内容信息分类或app内容信息tab分类 1.如何使用#xff1f; Tabs 组件提供了选项卡功能#xff0c;默认选中第一个标签页#xff0c;你也可以通过 value 属性来指定当前选中的标签页。 temp… 选项卡组件分隔内容上有关联但属于不同类别的数据集合。 常见于网站内容信息分类或app内容信息tab分类 1.如何使用 Tabs 组件提供了选项卡功能默认选中第一个标签页你也可以通过 value 属性来指定当前选中的标签页。 templateel-tabs v-modelactiveName tab-clickhandleClickel-tab-pane label用户管理 namefirst用户管理/el-tab-paneel-tab-pane label配置管理 namesecond配置管理/el-tab-paneel-tab-pane label角色管理 namethird角色管理/el-tab-paneel-tab-pane label定时任务补偿 namefourth定时任务补偿/el-tab-pane/el-tabs
/template
scriptexport default {data() {return {activeName: second};},methods: {handleClick(tab, event) {console.log(tab, event);}}};
/script
2.选项卡样式
选项卡样式的标签页。
只需要设置 type 属性为 card 就可以使选项卡改变为标签风格。templateel-tabs v-modelactiveName typecard tab-clickhandleClickel-tab-pane label用户管理 namefirst用户管理/el-tab-paneel-tab-pane label配置管理 namesecond配置管理/el-tab-paneel-tab-pane label角色管理 namethird角色管理/el-tab-paneel-tab-pane label定时任务补偿 namefourth定时任务补偿/el-tab-pane/el-tabs
/template
scriptexport default {data() {return {activeName: first};},methods: {handleClick(tab, event) {console.log(tab, event);}}};
/script
3.卡片化
卡片化的标签页。
将type设置为border-card。el-tabs typeborder-cardel-tab-pane label用户管理用户管理/el-tab-paneel-tab-pane label配置管理配置管理/el-tab-paneel-tab-pane label角色管理角色管理/el-tab-paneel-tab-pane label定时任务补偿定时任务补偿/el-tab-pane
/el-tabs
4.选项卡位置调整
可以通过 tab-position 设置标签的位置
标签一共有四个方向的设置 tabPositionleft|right|top|bottomtemplateel-radio-group v-modeltabPosition stylemargin-bottom: 30px;el-radio-button labeltoptop/el-radio-buttonel-radio-button labelrightright/el-radio-buttonel-radio-button labelbottombottom/el-radio-buttonel-radio-button labelleftleft/el-radio-button/el-radio-groupel-tabs :tab-positiontabPosition styleheight: 200px;el-tab-pane label用户管理用户管理/el-tab-paneel-tab-pane label配置管理配置管理/el-tab-paneel-tab-pane label角色管理角色管理/el-tab-paneel-tab-pane label定时任务补偿定时任务补偿/el-tab-pane/el-tabs
/template
scriptexport default {data() {return {tabPosition: left};}};
/script
5.自定义标签页
可以通过具名 slot 来实现自定义标签页的内容
el-tabs typeborder-cardel-tab-panespan slotlabeli classel-icon-date/i 我的行程/span我的行程/el-tab-paneel-tab-pane label消息中心消息中心/el-tab-paneel-tab-pane label角色管理角色管理/el-tab-paneel-tab-pane label定时任务补偿定时任务补偿/el-tab-pane
/el-tabs
6.动态增减标签页
增减标签页按钮只能在选项卡样式的标签页下使用
el-tabs v-modeleditableTabsValue typecard editable edithandleTabsEditel-tab-pane:keyitem.namev-for(item, index) in editableTabs:labelitem.title:nameitem.name{{item.content}}/el-tab-pane
/el-tabs
scriptexport default {data() {return {editableTabsValue: 2,editableTabs: [{title: Tab 1,name: 1,content: Tab 1 content}, {title: Tab 2,name: 2,content: Tab 2 content}],tabIndex: 2}},methods: {handleTabsEdit(targetName, action) {if (action add) {let newTabName this.tabIndex ;this.editableTabs.push({title: New Tab,name: newTabName,content: New Tab content});this.editableTabsValue newTabName;}if (action remove) {let tabs this.editableTabs;let activeName this.editableTabsValue;if (activeName targetName) {tabs.forEach((tab, index) {if (tab.name targetName) {let nextTab tabs[index 1] || tabs[index - 1];if (nextTab) {activeName nextTab.name;}}});}this.editableTabsValue activeName;this.editableTabs tabs.filter(tab tab.name ! targetName);}}}}
/script 7.自定义增加标签页触发器
div stylemargin-bottom: 20px;el-buttonsizesmallclickaddTab(editableTabsValue)add tab/el-button
/div
el-tabs v-modeleditableTabsValue typecard closable tab-removeremoveTabel-tab-panev-for(item, index) in editableTabs:keyitem.name:labelitem.title:nameitem.name{{item.content}}/el-tab-pane
/el-tabs
scriptexport default {data() {return {editableTabsValue: 2,editableTabs: [{title: Tab 1,name: 1,content: Tab 1 content}, {title: Tab 2,name: 2,content: Tab 2 content}],tabIndex: 2}},methods: {addTab(targetName) {let newTabName this.tabIndex ;this.editableTabs.push({title: New Tab,name: newTabName,content: New Tab content});this.editableTabsValue newTabName;},removeTab(targetName) {let tabs this.editableTabs;let activeName this.editableTabsValue;if (activeName targetName) {tabs.forEach((tab, index) {if (tab.name targetName) {let nextTab tabs[index 1] || tabs[index - 1];if (nextTab) {activeName nextTab.name;}}});}this.editableTabsValue activeName;this.editableTabs tabs.filter(tab tab.name ! targetName);}}}
/script
