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

<Table
        :data="tableData"
        highlight-current-row
        border
        empty-text=" Warnings: No results were obtained under this model!"
        max-height="800"
      >
        <TableColumn
          type="index"
          width="50">
        </TableColumn>
        <TableColumn
          v-for="header in headers"
          :prop="header.key"
          :label="header.lable"
          :column-key='header.key'
          width="150"
        >
          <template slot="header" slot-scope="scope">
            {{header.lable}}
            <template>
              <v-menu offset-y :close-on-content-click="false">
                <template v-slot:activator="{ on }">
                  <v-icon small v-on="on" v-on:click.stop="">{{filterObj[header.key] === ''? 'mdi-filter-outline':'mdi-filter-plus'}}</v-icon>
                </template>
                <v-card>
                  <v-list>
                    <template>
                      <v-list-item xs="12" class="filterItemContainer">
                        <v-list-item-content>
                          <v-text-field
                            v-model="filterObj[header.key]"
                            label="模糊匹配"
                          ></v-text-field>
                          <div style="text-align: center">
                            <v-btn color="#ff5f5f" style="margin-right: 10px" dark>筛选</v-btn>
                            <v-btn color="#ff5f5f" dark>重置</v-btn>
                          </div>
                        </v-list-item-content>
                      </v-list-item>
                    </template>
                  </v-list>
                </v-card>
              </v-menu>
            </template>
          </template>
        </TableColumn>
      </Table>

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

示例数据

 headers:[
          {
            key: "sampleID",
            lable: "SampleID",
          },
          {
            key: "gene",
            lable: "GeneSymbol",
          },
          {
            key: "Chr",
            lable: "Chr",
          },
          {
            key: "PopFreqMax",
            lable: "PopFreqMax",
          }
        ],
tableData:[
          {
            sampleID:'001',
            gene:'gene1',
            Chr:1,
            PopFreqMax:0.01,
          },
          {
            sampleID:'002',
            gene:'gene2',
            Chr:2,
            PopFreqMax:0.02,
          }
        ],
filterObj:{
          sampleID:'',
          Chr:'',
          gene:'',
          PopFreqMax:'',
        }

效果：

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