vue-elementui switch开关的使用

最新推荐文章于 2025-02-14 17:26:06 发布

zoe_xx

最新推荐文章于 2025-02-14 17:26:06 发布

阅读量2.8k

点赞数

分类专栏：后端程序员的前端路文章标签： vue java

本文链接：https://blog.youkuaiyun.com/Tashuo_/article/details/108854296

版权

后端程序员的前端路专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中使用Element-UI的Switch组件，包括设置不同颜色、值绑定及change事件处理。通过实例演示了如何在表格中显示状态，并展示如何根据用户操作调用后端API更新状态。

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

vue-elementui switch开关的使用

话不多说上代码

相关标签释义：

active-color：活跃时的颜色
inactive-color：不活跃时的颜色
active-value：活跃时的值
inactive-value：不活跃时的值
@change修改显示状态事件

table中显示状态代码片段

<el-table-column prop="showStatus" header-align="center" align="center" label="显示状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.showStatus"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
            @change="updateBrandStatus(scope.row)">
        </template>
      </el-table-column>

状态修改方法实例

     //修改状态
    updateBrandStatus(row) {
      console.log(row);
      //只需要传入修改的逐渐ID和状态即可
      let { brandId, showStatus } = row;
      this.$http({
        url: this.$http.adornUrl("/product/brand/update"),
        method: "post",
        data: this.$http.adornData({ brandId, showStatus }, false)
      }).then(({ data }) => {
        this.$message({
          type: "success",
          message: "状态更新成功"
        });  
      });
    }