el-switch 不能更改状态

最新推荐文章于 2025-02-16 15:37:16 发布

姽式、

最新推荐文章于 2025-02-16 15:37:16 发布

阅读量1.2k

点赞数 2

分类专栏： Element 文章标签：前端 elementui vue 前端框架

本文链接：https://blog.youkuaiyun.com/weixin_45936690/article/details/125816284

版权

Element 专栏收录该内容

7 篇文章

订阅专栏

本文档探讨了在Element UI中，如何将el-switch的状态绑定从v-value改为v-model，并修复点击无响应的问题。通过实例演示了如何正确使用v-model和相关事件处理，确保组件的正常交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

正常显示，但是点击无反应，加了点击事件也没反应。
在这里插入图片描述

<el-table-column
  label="状态"
  width="180"
>
  <template slot-scope="{row}">
    <el-switch
      v-value="row.status == 1"
      @click="modifyState(row)"
    />
  </template>
</el-table-column>

修改：

<el-table-column
  label="状态"
  width="180"
>
  <template slot-scope="{row}">
    <el-switch
      v-model="row.status"
      :active-value="1"
      :inactive-value="0"
      @change="modifyState(row)"
    />
  </template>
</el-table-column>