Vue Element-ui table comes with custom height of filter box

In el-table, you can filter in a column of a row, the code is as follows:

 <el-table-column prop="classOfTest" class="test" label="测试类名" :filters="classList" filter-placement="bottom-start" width="300" column-key="testOfClass"></el-table-column>

Where filters is the filter list, the format is classList = [{text: 'Test_Automatic Recognition of Distribution Box', value: 'Automatic Recognition of Test_ Distribution Box'},{text: 'Test_Automatic Recognition of Door', value: 'Test_door auto-recognition'},...]

filter-placement specifies the location of the filter box.

The interface diagram is as follows:

When there are few filtered data items, it can be displayed normally, but if there are too many filtered data items, the screen will not be displayed completely, so you need to add styles for control, you can open the console through chrome's F12, and then find the filter box, override styles:

1  .el-table-filter {
2     max-height: 500px;
3     overflow: auto;
4   }