vue项目中 状态功能的实现

停用/启用的状态

利用element ui框架的 开关 组件

demo

<sec-table-column prop="enable" label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.enable == 0">不启用</span>
          <span v-else>启用</span>
          <sec-switch
            @change="changeStatus($event, scope.row)"
            active-color="#13ce66"
            v-model="scope.row.enable"
            :active-value="1"
            :inactive-value="0"
            inactive-color="#dadbdf"
          ></sec-switch>
        </template>
</sec-table-column>

js

    // 启用停用
    changeStatus(callback, row) {
      let text = "";
      if (callback == 1) {
        text = "开启";
        row.enable = 0;
      } else {
        text = "关闭";
        row.enable = 1;
      }
      //改变状态
      // this.$confirm(`是否变更状态为${text}`, "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // }).then(async () => {
      let message = "";
      if (row.enable == 0) {
        row.enable = 1;
        message = "开启成功";
      } else {
        row.enable = 0;
        message = "关闭成功";
      }
      // // 逻辑操作
      // this.$message({
      //   type: "success",
      //   message,
      // });
      // });
    },