el-switch 单选

223 阅读1分钟
         <el-table-column label="状态" align="center" width="100">
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.status"
                    active-value="0"
                    inactive-value="1"
                    @change="handleStatusChange(scope.row)"
                  ></el-switch>
                </template>
              </el-table-column>
              
                  // 角色状态修改
                handleStatusChange(row) {
                  let text = row.status === "0" ? "启用" : "停用";
                  this.$confirm(
                    '确认要"' + text + '""' + row.roleName + '"角色吗?',
                    "警告",
                    {
                      confirmButtonText: "确定",
                      cancelButtonText: "取消",
                      type: "warning",
                    }
                  )
                    .then(function () {
                      return changeRoleStatus(row.roleId, row.status);
                    })
                    .then(() => {
                      this.msgSuccess(text + "成功");
                    })
                    .catch(function () {
                      row.status = row.status === "0" ? "1" : "0";
                    });
                },
                
                

image.png image.png

  时间选择器下拉没有显示 层级低的原因 在app。vue写
  .el-date-picker {
      z-index: 35555 !important;
    }
   <el-form-item
                  label="屏蔽设备"
                  prop="stopStatus"
                  v-show="hiddenZheZhao"
                >
                  <el-switch
                    v-model="devicePbForm.stopStatus"
                    active-value="true"
                    inactive-value="false"
                  ></el-switch>
                </el-form-item>
              </el-form>