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:'',
        }

效果：

博客园地址：https://www.cnblogs.com/Li–gm/p/13141659.html
git地址：https://github.com/Li-gm/Vuetify_Element_Table