使用bootstrapTable时，NomeSocial为空如何隐藏Nome do Beneficiário列

我们可以借助bootstrapTable提供的onLoadSuccess（数据加载完成事件），在每次拿到服务端返回数据后判断NomeSocial字段的值情况，动态控制目标列的显隐，修改后的代码如下：

tabela.bootstrapTable('refresh');
var options = {
    pagination: "true",
    classes: "table",
    pageSize: 10,
    cache: false,
    pageList: "[10, 25, 50]",
    sidePagination: "server",
    url: url,
    columns: [
        {
            title: 'CPF',
            field: 'Cpf',
            align: 'center',
            valign: 'middle'
        },
        {
            title: 'Matrícula',
            field: 'Matricula',
            align: 'center',
            valign: 'middle'
        },
        {
            title: 'Nome do Beneficiário',
            field: 'Nome',
            align: 'center',
            valign: 'middle'
        },
        {
            title: 'Nome Social do Beneficiário',
            field: 'NomeSocial',
            align: 'center',
            valign: 'middle'
        },
        {
            title: 'Visualizar',
            align: 'center',
            valign: 'middle',
            formatter: visualizar
        }
    ],
    formatNoMatches: function () {
        return mensagemSemRegistro;
    },
    // 新增数据加载完成回调
    onLoadSuccess: function(res) {
        // 按服务端实际返回的数据结构取行列表，默认res.rows为行数据数组
        const rows = res.rows || res;
        // 判断所有行的NomeSocial是否都是空值/Null，如需只要有任意一行NomeSocial为空就隐藏列，将every改为some即可
        const allNomeSocialEmpty = rows.every(item => !item.NomeSocial || item.NomeSocial.trim() === '');
        
        if (allNomeSocialEmpty) {
            // 符合隐藏条件，隐藏Nome列
            tabela.bootstrapTable('hideColumn', 'Nome');
        } else {
            // 不符合隐藏条件，显示Nome列
            tabela.bootstrapTable('showColumn', 'Nome');
        }
    }
};

tabela.bootstrapTable(options);

其他场景适配 #

如果你不需要隐藏整列，只是需要NomeSocial为空的行隐藏对应Nome单元格的内容，可以直接在Nome列的formatter回调中处理：

{
    title: 'Nome do Beneficiário',
    field: 'Nome',
    align: 'center',
    valign: 'middle',
    formatter: function(value, row) {
        // 当前行NomeSocial不为空才返回Nome的值，否则返回空
        return row.NomeSocial && row.NomeSocial.trim() !== '' ? value : '';
    }
}

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