如何优雅的处理列表单元格无数据时展示'--'

前言

我们的项目(特别是管理系统)一般会有很多的表格，表格里面经常会有某一单元格无数据的情况，这种我们一般不会让他显示空，无数据时一般会加个默认的placeholder 如： --; 那我们一般是怎么来显示 -- 的了。

示例

这里以antd为例:

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    render: (text) => <a href="#">{text}</a>
  },
  {
    title: "Age",
    dataIndex: "age",
    render: (text) => text || "--" // again and again
  },
  {
    title: "Address",
    dataIndex: "address",
    render: (text) => text || "--" // when the address is empty I have to  write the render function to set the empty placeholder again and again
  },
  {
    title: "placeholder",
    dataIndex: "placeholder",
    render: (text) => text || "--" // again and again
  }
];

正常情况下我们会对很多可能无数据的单元格手动处理 render: text => text || '--'; 这样的工作量其实非常大。

刚开始想着写一个方法来处理：

function getColumns(columns) {
    return columns.map(({render, dataIndex, ...rest}) => {
        if (render) {
            return {
                ...rest,
                dataIndex,
                render: (...args) => render(...args) || '--'
            }
        }
        return {
            ...rest,
            dataIndex,
            render: (_, record) => record[dataIndex] || '--'
        }
    })
}

但是这样也需要再使用的时候引入这个方法，还是不是我想要的，看有没有更简单的办法，遂去官方issue里面搜看其他人有没有类似的想法，但是没搜到，然后就提了个issue# Allow customization of ant-table-cell-placeholder in

很快便得到了@afc163 的回复并给出了很好的解决方案。

css empty

可以通过 css 的 empty 属性去控制，代码如下:

// 只需要这样一行代码便可以解决
.ant-table-cell:empty:before {
  content: '--';
}

是不是觉得又学到了，居然还可以这样。。。这样一行css就可以解决重复性的劳动，如果你还不知道这个属性，感觉去试试吧。

结语

目前经过两家公司但是团队的人都还不知道这种简单的处理方式，然后分享到团队了。大家都觉得这个方式非常好，但是这个有一个小缺陷，就是当数据为NaN时在页面中被渲染成文本形式的NaN了。这个还是需要自己去特殊处理一下的。

类似于这种通过css处理的方案还有很多，比如早前移动端rem适配方案。之前大家可能一般都是引入 amfe-flexible，其实一行 css代码也可以实现，不需要在引入amfe-flexible了

html {
  font-size: calc(100vw / 375 * 20);
}

只是现在大家一般都用 vw适配方案了。rem很少用了。

当我们在遇到很多需要大量重复写的代码时，我们可以思考下怎么来遵循DRY原则