[ElementPlus] 多标签页切换

版本

"element-plus": "2.1.9"

Store

export interface Tab {title: stringcontent: string
}

const store = createStore<{tabs: Tab[]current: Tab | null
}>({state: {tabs: [],current: null},mutations: {changeCurrent: (state, { index }) => {state.current = state.tabs[index] || null},addTab: state => {state.tabs.push({title: `标签 - ${state.tabs.length + 1}`,content: `内容 - ${state.tabs.length + 1}`})state.current = state.tabs[0]},removeTab: (state, { index }) => {state.tabs.splice(index, 1)}}
})

页面

<template><el-input-number v-model="inputValue" /><div>{{ store.state.current?.title || '' }}</div><el-button @click="() => addTab()">增加</el-button><el-tabsv-model="state.name":closable="true"type="border-card"@tab-remove="tabPanelName => removeTab(tabPanelName.toString())"><template v-for="(tab, index) in store.state.tabs" :key="index"><el-tab-pane :label="tab.title" :name="`${index}`">{{ tab.content }}</el-tab-pane></template></el-tabs>
</template><script setup lang="ts">
import { computed, reactive, watch } from 'vue'
import { useStore } from 'vuex'
import { type Tab } from './store'const store = useStore<{tabs: Tab[]current: Tab | null
}>()const state = reactive<{name: string
}>({name: '0'
})const addTab = () => {store.commit('addTab')
}const removeTab = (name: string) => {const index = Number.parseInt(name)store.commit('removeTab', { index })const currentIndex = Number.parseInt(state.name)if (index <= currentIndex) {state.name = `${currentIndex - 1}`}
}watch(state, (newValue, oldValue) => {store.commit('changeCurrent', { index: Number.parseInt(newValue.name) })
})const inputValue = computed({get: () => Number.parseInt(state.name),set: value => (state.name = `${value}`)
})
</script>

坑点

el-tabs 组件的事件回调参数 tabPanelName 和 el-tab-pane 组件的参数 name 类型并不一致，需要额外进行转换。

如果直接使用数字类型的下标作为 name，当切换到倒数第二个标签页并进行关闭时，v-model 绑定的值会因为 0 和 "0" 类型不同，从而导致第一个 Tab 页无法自动显示。

[ElementPlus] 多标签页切换相关推荐

php 标签页切换,vue.js实现标签页切换效果
第二个实例是关于标签页切换的,先看一下效果: 这也是一个很常见的交互效果,以往正常的javascript写法是给各个按钮绑定事件来切换不同的层,当然也可以用纯css写,给上面的三个切换的层分别添加一个 ...
BootStrap之标签页切换
标签页切换标签页切换标签页插件第一个官方例子调用tab("show")显示tab-pane中的内容第一个例子的HTML+CSS代码 fade in效果函数介绍前提条件 ...
JavaScript 实现标签页切换效果
JavaScript 实现标签页切换效果构建主体界面 HTML 代码 <h1>实现标签页的切换效果</h1> <ul id="tab">& ...
【Axure RP9基础】 Axure标签页切换详解
[Axure RP9基础] 标签页切换在设计原型中,PC和APP端标签页切换是常用的功能,那么在用Axure画原型时我们可以用矩形和动态面板做出标签页切换的效果. 最终效果:点击标签页,显示标签页选 ...
微信小程序中标签页切换效果是怎么做出来的
于传统网页开发中的标签页切换效果不同的是,小程序的标签页切换更接近原生APP的交互体验!也就是可以通过左右滑动页面进行切换,类似于网页开发中的焦点图切换的效果. --这当然是通过微信小程序强大的组件和 ...
Python爬虫之selenium对标签页切换、切换frame标签、cookie处理、执行js代码、开启无界面、以及使用代理ip和替换user-agent等方法
一.selenium对标签页切换.切换frame标签.cookie处理.执行js代码.开启无界面.以及使用代理ip和替换user-agent等方法 (一).selenium标签页的切换当seleni ...
bootstrap --- 标签页切换
很多时候,我们希望写一个简单的标签页.以下使用bootstrap来实现- 首先导入bootstrap的依赖:jquery的依赖.bootstrap的依赖注意: jquery的依赖要在bootstra ...
ocx控件 postmessage消息会消失_实战经验：如何检测CMFCTabCtrl控件标签页切换事件...
MFC库中经常会使用到的一个控件是Tab标签页控件,这个控件在展现多个平级数据集非常合适. 与控件对应的,是MFC库中的两个类:CMFCTabCtrl和CMFCBaseTabCtrl,其中CMFCTa ...
layui标签页切换并自动刷新
layui每打开一个页面就会以标签页的形式保留在导航条上,然而我们在其他的标签页改了数据,再切换回去页面数据还是以前的,这里就需要一个切换标签页显示并自动刷新当前标签页咯,保证每次切换回来就能看到新数 ...

[ElementPlus] 多标签页切换

版本

Store

页面

坑点

[ElementPlus] 多标签页切换相关推荐

最新文章

热门文章