当前位置：首页 > 前端教程

elementui切换

2026-01-14 21:55:45前端教程

使用 Element UI 进行切换操作

Element UI 提供多种组件可用于切换操作，如 el-switch、el-tabs、el-radio 等。以下是几种常见切换场景的实现方法。

使用 el-switch 切换状态

el-switch 是一个开关组件，适合布尔状态的切换。

<template>
  <el-switch v-model="isActive" active-text="开启" inactive-text="关闭" @change="handleSwitchChange" />
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    }
  },
  methods: {
    handleSwitchChange(val) {
      console.log(`切换状态：${val}`)
    }
  }
}
</script>

使用 el-tabs 切换标签页

el-tabs 适用于多标签页切换场景。

<template>
  <el-tabs v-model="activeTab" @tab-click="handleTabClick">
    <el-tab-pane label="首页" name="home">首页内容</el-tab-pane>
    <el-tab-pane label="用户管理" name="users">用户管理内容</el-tab-pane>
    <el-tab-pane label="设置" name="settings">设置内容</el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'home'
    }
  },
  methods: {
    handleTabClick(tab) {
      console.log(`切换到标签页：${tab.name}`)
    }
  }
}
</script>

使用 el-radio-group 切换选项

el-radio-group 适合单选切换场景。

<template>
  <el-radio-group v-model="selectedOption" @change="handleRadioChange">
    <el-radio label="option1">选项 1</el-radio>
    <el-radio label="option2">选项 2</el-radio>
    <el-radio label="option3">选项 3</el-radio>
  </el-radio-group>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: 'option1'
    }
  },
  methods: {
    handleRadioChange(val) {
      console.log(`选中选项：${val}`)
    }
  }
}
</script>

动态切换组件

结合 v-if 或 component 动态切换组件。

<template>
  <el-button @click="toggleComponent">切换组件</el-button>
  <component :is="currentComponent" />
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  },
  components: {
    ComponentA,
    ComponentB
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'
    }
  }
}
</script>

以上方法覆盖了常见的切换需求，可根据实际场景选择合适的方式。

elementui切换