通过JavaScript根据值修改徽章颜色（遇错误徽章问题）

你的<select>下拉框中选项的value属性是字符串类型的"false"和"true"，但render函数里的switch语句用的是布尔类型的false、true做判断。由于JavaScript中字符串和布尔值类型不相等（"false" !== false、"true" !== true），导致所有情况都匹配不到case分支，最终走default输出错误徽章。

方案一：修改case值为字符串类型 #

直接将switch中的case条件改为对应字符串，和下拉框的value保持一致：

render: function (data, type, row, meta) {
    switch (data) {
        case "false":
            return '<span class="badge bg-success">Un Locked</span>';
        case "true":
            return '<span class="badge rounded-pill bg-secondary">Locked</span>';
        default:
            return '<span class="badge badge-danger badge-pill">Error!</span>';
    }
}

方案二：将data转换为布尔值后判断 #

先把获取到的字符串值转换成布尔类型，再进行判断：

render: function (data, type, row, meta) {
    // 将字符串转为布尔值："true"转为true，其他转为false
    const isLocked = data === "true";
    
    if (isLocked) {
        return '<span class="badge rounded-pill bg-secondary">Locked</span>';
    } else if (data === "false") {
        return '<span class="badge bg-success">Un Locked</span>';
    } else {
        return '<span class="badge badge-danger badge-pill">Error!</span>';
    }
}

或者用switch处理转换后的布尔值：

render: function (data, type, row, meta) {
    const boolData = data === "true";
    switch (boolData) {
        case false:
            return '<span class="badge bg-success">Un Locked</span>';
        case true:
            return '<span class="badge rounded-pill bg-secondary">Locked</span>';
        default:
            return '<span class="badge badge-danger badge-pill">Error!</span>';
    }
}

内容的提问来源于stack exchange，提问作者fedev