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
