1. 程式人生 > >vue Element-ui 表格自帶篩選框自定義高度

vue Element-ui 表格自帶篩選框自定義高度

image n-k pre chrome code lac 分享 sso spa

el-table中可以在一行的某列進行篩選,代碼如下:

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

其中 filters 就是篩選列表,格式為 classList = [{text: ‘Test_配電箱自動識別‘, value: ‘Test_配電箱自動識別‘},{text: ‘Test_門自動識別‘, value: ‘Test_門自動識別‘},……]

filter-placement 指定了篩選框的位置。

界面圖如下:

技術分享圖片

在篩選的數據項比較少的情況下,可以正常展示,但是如果篩選的數據項很多,這樣一屏就展示不全,所以需要添加樣式進行控制,可以通過chrome的F12打開控制臺,然後找到該篩選框,重寫樣式:

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

vue Element-ui 表格自帶篩選框自定義高度