element ui中el-switch根据后端传递值进行默认显示

需求:修改一个行数据,弹出一个修改框,其中状态(启用/禁用)使用switch控制。后端返回的状态,分别是1和0,其中0表示禁用,1表示启用。

问题:当每次点击修改时,不管后端反馈的状态是1还是0,该行数据的状态开关始终处于关闭状态,。如下图所示。即显示状态与数据库中的数据不一致。

element ui中el-switch根据后端传递值进行默认显示_第1张图片

element ui中el-switch根据后端传递值进行默认显示_第2张图片原因分析:这是由于Swich默认是boolean类型,而后台传值“1” “0”为字符串类型。

解决方法:书写时active-value="1" 和 inactive-value="0" 前面应加上冒号“:”。

           
            
            

                

            
------------------------------------------------------
            
            

                

            

  修改后效果:

element ui中el-switch根据后端传递值进行默认显示_第3张图片

 点击修改时,可以看到状态switch开关与当前状态 1 已经匹配。

你可能感兴趣的:(elementui,vue.js,前端)