若依 ruoyi vue el-switch 列表开关状态显示有误 全部关闭的问题

2 篇文章 0 订阅
文章讲述了在前端使用el-switch组件显示后台传来的状态时,由于数据类型和active-value、inactive-value的匹配问题导致开关状态显示异常的情况。当后台传递的是int类型状态值时,el-switch组件的属性需使用冒号前缀,例如`:active-value`和`:inactive-value`,并确保值与后台状态值对应,以正确显示开关状态。
摘要由CSDN通过智能技术生成

后台使用int类型传状态status的值

但是前端列表展示的开关状态是未开启,实际上,后台传的都是开启的状态

结果应该是这样

确定后台传的status值 在 el-switch 标签中是否使用了正确的值判断,比如 后台用的是字符串、布尔 或者是 数值类型,以及对应的值是否和 active-value、inactive-value 对应上了。

以下是el-switch 对字符串和数值型数据的不同处理:

1. 字符串传值,属性前无冒号 active-value="0" inactive-value="1"

  <el-table-column label="状态" align="center" prop="status">
    <template slot-scope="scope">
      <dict-tag :options="dict.type.tb_robot_status" :value="scope.row.status"/>
    </template>
  </el-table-column>
  <el-table-column label="状态 string传值" align="center" width="100" prop="status">
    <template slot-scope="scope">
      <el-switch
        v-model="scope.row.status"
        active-value="0"
        inactive-value="1"
        @change="handleStatusChange(scope.row)"
      ></el-switch>
    </template>
  </el-table-column>

如果后台使用的是int值 但是el-switch没有加冒号,则会导致开关状态显示异常:

2. 数值(int等)传值,属性前加冒号 :active-value="0" :inactive-value="1"

  <el-table-column label="状态" align="center" prop="status">
    <template slot-scope="scope">
      <dict-tag :options="dict.type.tb_robot_status" :value="scope.row.status"/>
    </template>
  </el-table-column>
  <el-table-column label="状态 int传值" align="center" width="100" prop="status">
    <template slot-scope="scope">
      <el-switch
        v-model="scope.row.status"
        :active-value="0"
        :inactive-value="1"
        @change="handleStatusChange(scope.row)"
      ></el-switch>
    </template>
  </el-table-column>

el-switch 的其他属性

示例

      <el-table-column label="状态" align="center" width="100" prop="status">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="0"
            :inactive-value="1"
            active-text="开"
            inactive-text="关"
            @change="handleStatusChange(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>

参考:

https://www.jb51.net/article/265678.htm

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值