如何el-switch 将打开和关闭时的文字放在同一侧

在HTML5的`<el-switch>`组件中，如果你想将开关切换时的文字（默认文本和禁用文本）都放在同一侧，你可以通过CSS样式来调整。这个组件有两个状态对应的文本标签，一个是`<span class="el-switch__core">...</span>`（默认开/关状态），另一个是`<span class="el-switch__label"></span>`（文字描述）。

首先，你需要保证`<el-switch>`的两个文本标签在同一行内。你可以通过设置`display`属性为`inline-block`或者`flex`来实现：

<template>
  <div>
    <el-switch v-model="switchValue" @change="handleChange">
      <span class="el-switch__core" :style="{ backgroundColor: switchValue ? 'green' : 'red' }"></span>
      <span class="el-switch__label">{{ statusText }}</span>
    </el-switch>
  </div>
</template>

<style scoped>
.el-switch {
  position: relative;
}

.el-switch__core {
  display: inline-flex; /* 或者 display: flex */
}

.el-switch__label {
  display: inline-block; /* 或者 display: flex-item, 如果使用了 display: flex */
}
</style>

接下来，在你的JavaScript中控制`statusText`的值，根据`switchValue`的状态显示相应的文字：

data() {
  return {
    switchValue: false,
    statusText: this.switchValue ? "已开启" : "已关闭"
  };
},

methods: {
  handleChange(value) {
    this.statusText = value ? "已开启" : "已关闭";
  }
}