欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

elui 的 el-switch 实现了状态按钮启动/停止操作。

最编程 2024-05-05 17:20:28
...
效果图
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";
        });
      },

推荐阅读