css-表头筛选的特定样式

背景

饿了么的表头筛选样式比较简单，如图1，产品觉得不够醒目（觉得用户可能不知道这是筛选，我表示不理解）

要求改进筛选的样式，达到图2的效果，主要是状态列，既希望这列的宽度固定，不会随着过长的筛选项被撑开，还要在筛选项内容比宽度长时，只保留第一个字，其余用省略号代替。记录一下这个麻烦的要求

写法：

el-table有个属性，可以绑定一个方法:header-cell-class-name="getCellBorder"

getCellBorder(data) {
    if (data.column.filterable) {
        if (data.columnIndex === 1) {
            //索引为1,代表是状态列，此列宽度固定,有文字过长的处理
            //箭头用定位处理,不然显示会有问题
            return 'el-cell-border-status'
        } else {
            return 'el-cell-border' //普通列,宽度自适应
        }
    }
}

.el-table th.el-cell-border > .cell {
  width: auto;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  &:hover {
    border-color: #17b8bc;
  }
}
.el-table th.el-cell-border-status > .cell {
  width: 55px;
  height: 36px;
  line-height: 36px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
  border: 1px solid #ddd;
  border-radius: 6px;
  position: relative;
  cursor: pointer;
  &:hover {
    border-color: #17b8bc;
  }
  .el-table__column-filter-trigger {
    position: absolute;
    right: 5px;
    top: 1px;
  }
}