一个基于iView Table 的带搜索过滤的Table组件, 支持
Input输入框 和Select下拉框两种表格筛选方式.
模板
<filter-table @load="loadData" //过滤触发事件
:data="users"
:columns="tableColumns"
:search="search" //过滤的条件
>
</filter-table>列描述数据对象
tableColumns: [
{
title: '用户名',
key: 'username',
filter: {
type: 'Input' //输入框过滤
}
},
{
title: '状态',
key: 'status',
filter: {
type: 'Select',//下拉框过滤
option: userStatus //下拉框选项数据对象
}
]下拉框选项数据格式
const userStatus = {
0: {
value: 0,
name: '全部'
},
1: {
value: 1,
name: '已锁定',
color: 'red'
},
2: {
value: 2,
name: '正常',
color: 'green'
},
};# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --reportGithub源码地址
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent