el-table使用el-switch选择器没效果

出现问题的代码:

0表示启用,1表示禁用,发现页面根本没有效果,百思不得其解,查阅资料,恍然大悟。

javascript 复制代码
 <el-table :data="userList" stripe border style="width: 100%" height="500">
        <el-table-column prop="status" label="用户状态" width="120">
            <template #default="scope">
                <el-switch v-model="scope.row.status" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                    active-value=0 inactive-value=1 />
            </template>
        </el-table-column>
    
</el-table>

解决:

active-value没加冒号,值是字符串,所以一直匹配不上数字,需要在属性前面添加:号,才能读取到数字。

javascript 复制代码
 :active-value=0 :inactive-value=1
相关推荐
Irene199112 分钟前
Vue 3 中编写单文件组件(SFC)的编译时语法糖:<script setup>
vue.js
2501_9444460015 分钟前
Flutter&OpenHarmony状态管理方案详解
开发语言·javascript·flutter
T_Donna20 分钟前
【问题解决】react native: cli.init is not a function
javascript·react native·react.js
qx0927 分钟前
html中使用vue3+elementplus
javascript·vue.js·html
bjzhang7535 分钟前
使用 HTML + JavaScript 实现滑动验证码
前端·javascript·html
不老刘1 小时前
前端面试八股文:JavaScript 原型链
javascript·原型链
行走的陀螺仪1 小时前
使用uniapp,实现根据时间倒计时执行进度条变化
前端·javascript·uni-app·vue2·h5
科技D人生1 小时前
Vue.js 学习总结(19)—— Vue3 按钮防重复点击三种方案总结
前端·vue.js·uniapp·vue3 防重复提交·uniapp 防重复提交·前端防抖
麦麦大数据1 小时前
F064 vue+flask知识图谱在线学习系统
vue.js·flask·知识图谱·在线学习·学习系统·ai学伴·ai助学
John_ToDebug1 小时前
Chromium WebUI 定制实践:从 C++ 注入到 JS 安全展示全链路解析
javascript·c++·chrome