Vuetify + Element 的Table筛选功能

ui框架的基础是：主ui是vuetify，引用了elelment ui的table 实现的效果；（表格为elelment ui,筛选框的样式是vuetify）
*可根据自己需求进行筛选框内容修改；

npm 安装element ui
在页面引用：

import {Table,TableColumn,Pagination} from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

components: {Table,TableColumn}

具体实现：

html

 1 <Table
 2         :data="tableData"
 3         highlight-current-row
 5         border
 6         empty-text=" Warnings: No results were obtained under this model!"
 7         max-height="800"
 8       >
 9         <TableColumn
10           type="index"
11           width="50">
12         </TableColumn>
13         <TableColumn
14           v-for="header in headers"
15           :prop="header.key"
16           :label="header.lable"
17           :column-key='header.key'
18           width="150"
19         >
20           <template slot="header" slot-scope="scope">
21             {{header.lable}}
22             <template>
23               <v-menu offset-y :close-on-content-click="false">
24                 <template v-slot:activator="{ on }">
25                   <v-icon small v-on="on" v-on:click.stop="">{{filterObj[header.key] === ''? 'mdi-filter-outline':'mdi-filter-plus'}}</v-icon>
26                 </template>
27                 <v-card>
28                   <v-list>
29                     <template>
30                       <v-list-item xs="12" class="filterItemContainer">
31                         <v-list-item-content>
32                           <v-text-field
33                             v-model="filterObj[header.key]"
34                             label="模糊匹配"
35                           ></v-text-field>
36                           <div style="text-align: center">
37                             <v-btn color="#ff5f5f" style="margin-right: 10px" dark>筛选</v-btn>
38                             <v-btn color="#ff5f5f" dark>重置</v-btn>
39                           </div>
40                         </v-list-item-content>
41                       </v-list-item>
42                     </template>
43                   </v-list>
44                 </v-card>
45               </v-menu>
46             </template>
47           </template>
48         </TableColumn>
49       </Table>

代码20--46行是筛选的框的设置

示例数据

 1  headers:[
 2           {
 3             key: "sampleID",
 4             lable: "SampleID",
 5           },
 6           {
 7             key: "gene",
 8             lable: "GeneSymbol",
 9           },
10           {
11             key: "Chr",
12             lable: "Chr",
13           },
14           {
15             key: "PopFreqMax",
16             lable: "PopFreqMax",
17           }
18         ],
19 tableData:[
20           {
21             sampleID:'001',
22             gene:'gene1',
23             Chr:1,
24             PopFreqMax:0.01,
25           },
26           {
27             sampleID:'002',
28             gene:'gene2',
29             Chr:2,
30             PopFreqMax:0.02,
31           }
32         ],
33 filterObj:{
34           sampleID:'',
35           Chr:'',
36           gene:'',
37           PopFreqMax:'',
38         }

效果：

git地址：https://github.com/Li-gm/Vuetify_Element_Table