ElementUI 标签;elementui的选项卡标签

解决方案简述

ElementUI 提供了非常方便的标签和选项卡组件，可以快速实现页面中标签切换的效果。无论是简单的信息展示还是复杂的应用场景，都能满足需求。通过使用<el-tabs>和<el-tab-pane>标签，我们可以轻松创建美观且功能丰富的选项卡。

基础用法

代码示例1：基本选项卡

html

  
    用户管理内容
    配置管理内容
    角色管理内容
    定时任务补偿内容
  
</p>


export default {
  data() {
    return {
      activeName: 'first'
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};


<p>

这段代码实现了最基础的选项卡功能，包括四个标签页，并绑定了点击事件。通过v-model双向绑定当前激活的标签页名称。

添加动态标签

如果需要动态增删标签，可以这样做：

代码示例2：动态标签

html

  <div>
    
      <el-tab-pane
        v-for="item in editableTabs"
        :key="item.name"
        :label="item.title"
        :name="item.name"
      >
        {{ item.content }}
      
    
    添加标签
  </div>
</p>


export 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);
      }
    },
    addTab(targetName) {
      this.handleTabsEdit('', 'add');
    }
  }
};


<p>

此段代码实现了可编辑（添加/删除）的标签页，用户可以通过按钮增加新标签，也可以关闭已有标签。