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