前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >elui的el-switch实现状态按钮启停操作

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

原创
作者头像
用户6493868
发布2022-03-08 07:00:49
7210
发布2022-03-08 07:00:49
举报
文章被收录于专栏:vue封装H5vue封装H5
效果图
2022-03-08_065841.png
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";
        });
      },

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 效果图
  • 实现步骤
    • 页面实现
      • js方法
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档