elui的el-switch实现状态按钮启停操作

效果图

2022-03-08_065841.png

实现步骤

页面实现

代码语言：javascript复制

<el-table-column label="状态" align="center" key="status">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.status" active-value="1" inactive-value="0"
            @change="handleStatusChange(scope.row)"></el-switch>
        </template>
      </el-table-column>

js方法

代码语言：javascript复制

      // 用户状态修改
      handleStatusChange(row) {
        let text = row.status === "1" ? "启用" : "停用";
        this.$confirm('确认要"'   text   '""'   row.phone   '"用户吗?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
		  center: true
        }).then(function() {
          return enableMember(row.uid, row.status);
        }).then(() => {
          this.msgSuccess(text   "成功");
        }).catch(function() {
          row.status = row.status === "1" ? "0" : "1";
        });
      },

el

0 人点赞