当前位置：首页 > article >正文

Vue 90 ，Element 13 ，Vue + Element UI 中 el-switch 使用小细节解析，避免入坑（获取后端的数据类型自动转变）

article 2024/12/4 6:33:02

前言

在开发过程中，我们经常遇到一些看似简单的问题，但有时正是这些细节问题让我们头疼不已。今天，我就来和大家分享一个我在开发过程中遇到的 `el-switch` 使用的小坑，希望大家在使用时能够避免。

一. 问题背景

在某个 Vue 项目中，我需要使用 el-switch 组件来表示一个 isStruct 字段的开关状态。原本的需求是：当 isStruct 的值为 1 时，表示开启状态；当 isStruct 为 0 时，表示关闭状态。然而，在实现过程中，虽然在后端接口中 isStruct 返回的是数字类型（1 或 0），但在前端界面中，开关的状态显示异常——不但切换状态不准确，而且最终的 isStruct 字段也变成了字符串 "0" 或 "1"，而不是期望的数字。

这个问题导致了前端显示的状态与实际数据不一致，严重影响了用户体验，且在调试过程中，问题并不明显，直到打印数据才发现数据类型发生了变化。

二. 问题分析

首先，我们需要明确 el-switch 的工作原理。在 Vue 中，v-model 是用来实现双向数据绑定的。当我们使用 el-switch 组件时，它会根据 active-value 和 inactive-value 的值来决定切换的状态。v-model 会绑定到指定的字段（在此例中为 scope.row.isStruct），并在切换时修改其值。

问题的根本原因在于 el-switch 组件的 active-value 和 inactive-value 属性的类型处理。如果你设置了 active-value="1" 和 inactive-value="0"，这两个值是写死的，而且默认是字符串类型，那么 v-model 绑定的 isStruct 就会变成字符串 "1" 或 "0"，而不是数字 1 或 0。 这时，也会导致获取的 isStruct 数据类型发生变化，而我们期待的是一个数字类型的值，这就导致了数据不一致和展示错误。

三. 问题重现

让我们看看原始代码和最终出现的问题：

<el-table-column min-width="12%" label="是否开启视频结构化">
  <template slot-scope="scope">
    <!-- 设置了 active-value 和 inactive-value 为字符串 -->
    <el-switch 
      v-model="scope.row.isStruct" 
      active-value="1" 
      inactive-value="0"
      active-color="#13ce66" 
      inactive-color="#ff4949">
    </el-switch>
  </template>
</el-table-column>

在这个代码中，我们通过 v-model="scope.row.isStruct" 双向绑定了 isStruct 字段，而 active-value="1" 和 inactive-value="0" 被设置为字符串类型。虽然我们希望 1 和 0 表示数字，但在实际执行时，它们会被 Vue 内部转换为字符串，从而导致了开关的状态无法正确显示。

1. 问题表现

当 scope.row.isStruct 的值为数字 1 时，开关并没有显示为开启状态；
当 scope.row.isStruct 的值为数字 0 时，开关没有正确显示为关闭状态；
通过 v-model 绑定的 scope.row.isStruct 的值也被自动转换成了字符串 "1" 或 "0"。

2. 解决过程

解决方案 1：使用数字类型的 `active-value` 和 `inactive-value`

解决问题的第一步，就是确保 el-switch 组件的 active-value 和 inactive-value 的值是数字类型，而不是字符串。我们可以将 active-value="1" 和 inactive-value="0" 改成数字类型：

<el-table-column min-width="12%" label="是否开启视频结构化">
  <template slot-scope="scope">
    <!-- 使用数字类型的 active-value 和 inactive-value -->
    <el-switch 
      v-model="scope.row.isStruct" 
      :active-value="1" 
      :inactive-value="0"
      active-color="#13ce66" 
      inactive-color="#ff4949">
    </el-switch>
  </template>
</el-table-column>

通过这种方式，el-switch 会根据数字 1 和 0 来设置开关状态，确保 v-model 绑定的数据始终是数字类型，从而避免了字符串转换的问题。

解决方案 2：强制转换 `isStruct` 字段为数字

尽管我们修改了 el-switch 的 active-value 和 inactive-value，但为了保证数据一致性，最好在接收到后端数据时，强制将 isStruct 字段转换为数字类型。这样可以避免在其他地方出现字符串 "1" 或 "0" 的问题。

const data = res.rows.map(item => ({
  ...item,
  isStruct: Number(item.isStruct)  // 强制转换为数字
}));
this.tableData = data;

这样处理之后，我们就确保了无论后端返回的数据是字符串 "1" 或 "0"，都能够转换为数字类型 1 和 0，保持一致性。

3 问题总结

问题原因： el-switch 组件的 active-value 和 inactive-value 默认是字符串类型，因此在绑定 v-model 时，数据类型发生了不期望的转换，导致获取初始数据 isStruct 的值变成了字符串 "0" 或 "1"，而不是数字。刚开始还以为是后端问题，记录，避免入坑。

解决方案：

第一步： 使用动态的数字类型的 :active-value 和 :inactive-value，避免字符串类型的自动转换。
第二步： 在接收到后端数据后，强制将 isStruct 字段转换为数字类型，确保数据一致性。

最佳实践： 在处理 Vue 组件的 v-model 双向绑定时，要特别注意数据类型的一致性。尤其是在涉及到开关、选择框等组件时，active-value 和 inactive-value 的数据类型应该与 v-model 绑定的数据类型一致。