elementUi问题总结一tabs标签页

最新推荐文章于 2025-05-22 16:30:16 发布

若繁花逝尽

最新推荐文章于 2025-05-22 16:30:16 发布

阅读量1.7w

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_42979149/article/details/87353934

web 同时被 3 个专栏收录

39 篇文章

订阅专栏

vue

6 篇文章

订阅专栏

elementui

2 篇文章

订阅专栏

本文介绍如何在 Element UI 的 TabPane 组件中实现动态关闭功能，通过设置 closable 属性来控制标签页是否可以被关闭，提供了一个具体的代码示例，展示了如何在 Vue.js 中操作 tabs 的增删。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

设置第一个标签不能关闭，其余的都能关闭

el-tab-pane添加:closable=“item.close”

<template>
    <el-tabs v-model="editableTabsValue" type="border-card" @tab-remove='tabs_remove'>
      <el-tab-pane 
        :key="item.name" 
        v-for="(item, index) in editableTabs" 
        :label="item.title" 
        :name="item.name" 
        :closable="item.close"
      >
        <iframe :src="item.content" style="width:100%;height:800px;border:none;"></iframe>
      </el-tab-pane>
    </el-tabs>
  </template>

需要关闭的加close: ‘closable’，不需要关闭的不加

data: function() {
        // return { visible: false }
        return {
          editableTabsValue: '1',
          editableTabs: [{
            title: 'TabTabTabTabTabTabTabTabTabTabTabTabTabTabTabTab 1',
            name: '1',
            content: 'https://www.hao123.com/'
          }, {
            title: 'Tab 2',
            name: '2',
            content: 'http://www.baidu.com',
            close: 'closable'
          }]
        };
      },