关闭标签页时,如果是最后一个tab标签页,则不能删除;如果删除的是其他标签页,则关闭该标签页;如果删除的是当前标签页,则关闭当前标签页并切换到最后一个标签页;最后,清除关闭后的标签页缓存。 // 移除tab async removeTab (tabKey) { // 剩下一个时不能删 if (this.tabs.length === 1) return const in...
其实也很简单,我们只需要增加一个 数组 (Set,tabs) 用于存放点击过的菜单的key,然后依据 tabs 绑定 el-tabs 即可。 设置容器和监听 const tabs = reactive(new Set([])) // 点击过且没有关闭的二级菜单,做成动态tab标签// 监听当前路由,设置 tabswatch(() =>currentRoute.key, (key) => {tabs.add(ke...
基于el-tabs 封装一个动态多tabs组件 nf-router-view-tabs: <el-tabsv-model="$router.currentRoute.key"type="border-card"><el-tab-panelabel="桌面"name="home"><component:is="$router.home"></component></el-tab-pane><el-tab-panev-for="key in $router.tabs":key="key":label="$router.me...
el-tab-pane> </el-tabs> </el-form> <template #footer> <el-button @click="dialogVisible = false">取消</el-button> <el-button @click="resetForm()">重置</el-button> <el-button type="primary" @click="submitForm()">保存</el-button> </template> </el-dialog> </template> ...
首选想到的就是UI库提供的Tabs 标签页,本着“拿来主义”当然要用现成的了。 看看官网的介绍,可以采用“动态增减标签页”里的例子来做,只是自带的那个“x”飘来飘去的太烦人,所以去掉了,用插槽自己做一个“x”。 <el-tabsv-model="activeName"type="card"@tab-click="tabClick"><el-tab-panelabel="桌面...
</el-tabs> </template> 1. 2. 3. 4. 5. 6. 7. 8. export default { data() { return { activeName: 'second' }; }, methods: { handleClick(tab, event) { console.log(tab, event); //这样才能获取每个el-tab-pane的name属性 console.log...
-- Tab 页签区域 --> <el-tabs v-model="activeName" @tab-click="handleTabClick"> <!-- 动态参数页签 --> <el-tab-pane label="动态参数" name="many"> <el-button type="primary" size="mini" @click="showAddDialogVisible">添加参数</el-button> <!-- 动态参数表格 --> <el-table> ...
-- 中间的 tabs --> <el-tabs stretch type="border-card"> <el-tab-pane> <template #label> <el-icon><UserFilled /></el-icon> 账号登录 </template> </el-tab-pane> <el-tab-pane> <template #label> <el-icon><Iphone /></el-icon> 手机登录 </template> </el-tab-pane> <...
.label { color: var(--el-color-primary); //激活标签页高亮 } :deep(.el-tabs__item) { &:hover { span { color: var(--el-color-primary); //鼠标移到标签页高亮 } } .el-dropdown { line-height: inherit; // 统一标签页显示名称行高 } } ©著作权归作者所有,转载或内容合作请联系...
内容比较简单,应该都能看的懂,就是实现了对tabsMenuList的增删改查操作,借助Pinia可以很简单的实现数据管理和维护,同时也能实现响应式。 2、定义tabs组件 标签组件设计比较常规,就是将用户点击的路由给存下来,然后借助element-plus官方提供的el-tabs组件,实现渲染,再增加几个小操作而已。