用el-swicth写启停功能

听风叙雨

已于 2022-06-14 13:26:48 修改

阅读量572

点赞数 4

文章标签：前端 vue elementui

于 2022-06-14 11:39:27 首次发布

本文链接：https://blog.csdn.net/m0_60914344/article/details/125273124

版权

前言

这里我们用后端返回的status字段来判断启用还是停用状态
后端给我们提供的status的值有可能是数字（status:0）也可能是字符串（status:'0'）
这两种的写法是有区别的：0为启用、1为停用

//status:0时
:active-value="0" 
:inactive-value="1"

//status:'0'时
active-value="0" 
inactive-value="1"

一、页面展示

1.status为数字类型（status:0）

代码如下（示例）：

     <el-table-column
        prop="status"
        label="状态"
        min-width="100"
        align="center"
      >
        <!-- 插槽 -->
        <template slot-scope="scope">
          <span v-if="scope.row.status == 0">启用</span>
          <span v-else>禁用</span>
          <el-switch
            @change="handleStatusChange(scope.row)"
            :value="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="0"
            :inactive-value="1"
          >
          </el-switch>
        </template>
      </el-table-column>

2.status为字符串类型（status:'0'）

代码如下（示例）：

      <el-table-column
        prop="status"
        label="状态"
        min-width="100"
        align="center"
      >
        <!-- 插槽 -->
        <template slot-scope="scope">
          <span v-if="scope.row.status == 0">启用</span>
          <span v-else>禁用</span>
          <el-switch
            @change="handleStatusChange(scope.row)"
            :value="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="0"
            inactive-value="1"
          >
          </el-switch>
        </template>
      </el-table-column>

二、调接口实现启停功能需要的入参

1.这里我们后端要的参数status数据类型变成了数字，所以用了Number转换，如果接口文档还是要求字符串类型就没必要写

    //用户启停
    handleStatusChange(row) {
      const params = {
        id: row.id,
        status: Number(row.status == "0" ? "1" : "0"),
      };
    },

2.有的同学会遇到只要点击了按钮出现弹窗，还没点确认按钮状态就变化了。原因在于使用了v-model ,在我还没有点击确认隐藏时他就已经改成隐藏了，这不是我们想要的效果，把v-model改为:value就行了。