给table表头加自定义筛选框--CSS样式问题

需求

实现一个如下的筛选功能：点击小箭头，显示下拉款，选中下拉框中的某项后，下拉框消失，并且表格中呈现所选的筛选数据。下拉框出现后，点击非下拉框的地方，下拉框消失。

image.png

element-ui有类似的功能，但是它只能对当前页中已有的数据进行筛选，无法改写筛选方法去请求数据（楼主试过失败了，也有可能是我改写方法不对吧）不能满足我们需求，所以决定手写。

踩坑

正常大小没问题，当把浏览器窗口变小一点就会出现如下，箭头和下拉框错位的情况

image.png

解决

给 下拉框和 表格外套一层父元素

table-wrap: 下拉框filter-wrap 和 表格table 的父元素
filter-wrap：下拉框
table:表格

image.png

 .table-wrap{
    min-width: 1200px;
    position: relative;

  .table{
     min-width: 1200px;
     position: relative;
   }

  .filter-wrap{
    position: absolute;
    z-index: 1;
    width: 100px;
    top: 68px;
    right: 295px;
   }
  }

注意：下图标红的地方要给他固定宽度，不能让它随浏览器窗口大小自适应，否则我们无法给filter-wrap设置定宽（如果自动计算，成本太高）

image.png

初始数据结构