el-table表格表头竖线和空数据占位符随笔

1. 表格空值和空数据默认赋值占位符“-”

这种情况可以考虑在项目的common.scss中添加全局样式，通过使用&:empty来判断是否是空数据单元格，然后通过&::before伪类来添加占位符“-”，实现如下

.el-table {
    .cell {
        &:empty::before {
            content: "-";
            color: #223355;
        }
    }
    .is-leaf {
        .cell:empty::before {
            content: "-";
            color: #223355;
        }
    }
}

实际效果对比：

可能会出现的一些问题： 如果之前的代码存在空列来增加首列数据左间距，会自动赋值“-”（这是个错误的做法，公司之前的同事为了完成UI样式要求做的一个简单补丁）

2. 表头添加左竖线（element变antd样式）

这个同样可以使用伪类来实现，具体如下

.el-table thead .cell {
    &::before {
        content: "";
        border: 1px solid #E9ECF2;
        margin: 0 9px 0 -11px;  // 为什么这里是9px和11px
        background: #E9ECF2;
    }
}

效果图：

颜色很淡的一个竖线，具体竖线宽度可能跟el-table内cell的边距有关，本文代码可能受到公司其他公共样式的影响，部分放在了下面代码块中

.el-table{
    .cell {
        // 让边距只显示右边的1px
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0 10px;
        // 可能影响伪类的高度
        line-height: 0.16rem;
    }
}