elementui切换
使用 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>以上方法覆盖了常见的切换需求，可根据实际场景选择合适的方式。
