vue-elementui switch开关的使用

最新推荐文章于 2024-08-15 23:24:36 发布

zoe_xx

最新推荐文章于 2024-08-15 23:24:36 发布

阅读量2.7k

点赞数

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

本文链接：https://blog.csdn.net/Tashuo_/article/details/108854296

版权

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

2 篇文章 0 订阅

订阅专栏

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: "状态更新成功"
        });  
      });
    }