背景

饿了么的表头筛选样式比较简单，如图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' //普通列,宽度自适应}}
}

css">.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;}
}