如何基于布尔字段控制Lightning DataTable按钮禁用状态及显示

问题诊断 #

• 方案1失效原因：disabled属性的逻辑是true=禁用，false=可用，你需要的是Client__c=true时按钮可用，直接绑定Client__c会导致逻辑完全相反。
• 方案2失效原因：map中的判断'Client__c' == true是字符串与布尔值的无效比较，永远返回false，导致所有clientDisabled被设为true，全部按钮禁用。

正确实现方案 #

1. 生成正确的禁用状态字段 #

在获取数据源后，通过map遍历数据，基于Client__c生成反向的禁用字段：

this.tableData = result.data.map(record => ({
    ...record,
    // 核心逻辑：Client__c为true时，按钮可用（disabled=false）；反之禁用
    clientDisabled: !record.Client__c
}));

2. 配置表格列 #

将按钮的disabled属性绑定到生成的clientDisabled字段，同时配置单元格样式类来实现横线效果：

const columns = [
    {
        label: 'Client',
        type: 'button',
        typeAttributes: {
            label: 'Client',
            disabled: { fieldName: 'clientDisabled' },
            // 可选：禁用时切换按钮变体，增强视觉区分
            variant: { fieldName: 'clientDisabled' ? 'neutral' : 'brand' }
        },
        // 绑定动态样式类
        cellAttributes: {
            class: { fieldName: 'clientDisabled' ? 'strike-disabled-button' : '' }
        }
    }
];

3. 添加自定义CSS实现横线样式 #

在组件的CSS文件中定义样式，给禁用按钮的文本添加横线：

.strike-disabled-button .slds-button {
    text-decoration: line-through;
    opacity: 0.6; /* 可选：降低透明度，强化禁用状态 */
}

效果验证 #

• 当Client__c = true：clientDisabled = false，按钮正常可用，无横线
• 当Client__c = false：clientDisabled = true，按钮禁用，文本显示横线

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