vue el-switch初始值(默认值)不能正确显示状态问题及解决

Vue el-switch初始值不能正确显示状态问题及解决攻略

问题描述：

vue使用element UI库中的switch组件时，如果设置了默认值，可能会出现初始状态无法正确显示的问题。

问题分析：

这个问题的原因是因为element UI中的switch并没有提供v-model来绑定value值，而是提供了v-model来绑定一个boolean值，也就是是否选中的状态。当我们通过v-model绑定的boolean值改变时，value值并没有随之改变。所以我们需要手动判断并设置value值。

解决方案：

在Vue组件中使用element UI中的switch组件时，我们需要重载switch组件中的is-checked方法，在isChecked方法中手动判断是否选项被选中，并同时设置value值。

<template>
  <div>
    <el-switch 
      v-model="switchValue" 
      :active-value="1" 
      :inactive-value="0" 
      :active-color="activeColor"
      :inactive-color="inactiveColor"
      @change="handleSwitchChange" 
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      switchValue: 0,
      activeColor: '#13ce66',
      inactiveColor: '#ff4949',
    }
  },
  methods: {
    handleSwitchChange(value) {
      console.log(`Switch value is ${value}`);
    },
    isChecked(val) {
      // 当前switch组件的值为字符串true/false，需要使用===进行判断
      return val === '1';
    }
  },
  mounted() {
    // 根据选中状态设置switch的值
    this.switchValue = this.isChecked(this.$attrs.value) ? 1 : 0;
  }
}
</script>

在上述代码中，我们定义了isChecked方法来判断当前值是否被选中，并在mounted钩子函数中，手动将value的值（以字符串形式传入）转换成boolean值，再根据选中状态设置switch组件的值。

示例说明1：

在下面的示例中，我们创建了一个switch组件，并设置了默认值为true。需要注意的是，由于switch组件value只支持0和1，所以我们需要将true转换成数字1，并在isChecked方法中进行处理。

<template>
  <div>
    <el-switch 
      v-model="switchValue" 
      :active-value="1" 
      :inactive-value="0" 
      :active-color="activeColor"
      :inactive-color="inactiveColor"
      @change="handleSwitchChange" 
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      switchValue: 0,
      activeColor: '#13ce66',
      inactiveColor: '#ff4949',
    }
  },
  methods: {
    handleSwitchChange(value) {
      console.log(`Switch value is ${value}`);
    },
    isChecked(val) {
      // 将非0值转换成boolean值
      return !!val;
    }
  },
  mounted() {
    // 根据选中状态设置switch的值
    this.switchValue = this.isChecked(this.$attrs.value) ? 1 : 0;
  }
}
</script>

示例说明2：

在下面的示例中，我们使用了element UI库中自带的switch组件，并设置了默认值为true。需要注意的是，由于switch组件value只支持0和1，所以我们需要将true转换成数字1，并在isChecked方法中进行处理。

<template>
  <div>
    <el-switch 
      v-model="switchValue" 
      :active-color="activeColor"
      :inactive-color="inactiveColor"
      @change="handleSwitchChange" 
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      switchValue: false,
      activeColor: '#13ce66',
      inactiveColor: '#ff4949',
    }
  },
  methods: {
    handleSwitchChange(value) {
      console.log(`Switch value is ${value}`);
    },
    isChecked(val) {
      // 将非0值转换成boolean值
      return !!val;
    }
  },
  mounted() {
    // 根据选中状态设置switch的值
    this.switchValue = this.isChecked(this.$attrs.value);
  }
}
</script>

在上述代码中，我们通过传入value属性并使用v-model来绑定一个boolean值，同时在mounted钩子函数中再根据选中状态判断是否设置switch组件的值。

结论：

通过以上解决方案，我们可以成功解决vue el-switch初始值不能正确显示状态问题。