├── .gitignore
├── README.md
├── babel.config.js
├── package.json
├── public
    ├── favicon.ico
    ├── image
    │   ├── filterTable.gif
    │   └── project.gif
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── Example.vue
    │   └── FilterTable.vue
    ├── main.js
    └── plugins
    │   └── iview.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # iview-filter-table
  2 | 
  3 | > 一个基于iView Table 的带搜索过滤的Table组件, 支持 `Input`输入框 和  `Select`下拉框两种表格筛选方式.
  4 | 
  5 | ![project.gif](https://github.com/azhengyongqin/iview-filter-table/blob/master/public/image/project.gif)
  6 | 
  7 | ## 使用
  8 | **模板**：
  9 | ```html
 10 | <filter-table @on-search="onSearch"
 11 |               :data="users"
 12 |               :columns="tableColumns">
 13 | </filter-table>
 14 | ```
 15 | **列描述数据对象：**
 16 | ```js
 17 | tableColumns: [
 18 |   {
 19 |     title: '用户名',
 20 |     key: 'username',
 21 |     filter: {
 22 |       type: 'Input' //输入框过滤
 23 |     }
 24 |   },
 25 |   {
 26 |     title: '状态',
 27 |     key: 'status',
 28 |     filter: {
 29 |       type: 'Select',//下拉框过滤
 30 |       option: userStatus //下拉框选项数据对象
 31 |     }
 32 |   }
 33 | ]
 34 | ```
 35 | **下拉框选项数据格式：**
 36 | ```js
 37 |   const userStatus = {
 38 |     0: {
 39 |       value: 0,
 40 |       name: '全部'
 41 |     },
 42 |     1: {
 43 |       value: 1,
 44 |       name: '已锁定',
 45 |       color: 'red'
 46 |     },
 47 |     2: {
 48 |       value: 2,
 49 |       name: '正常',
 50 |       color: 'green'
 51 |     },
 52 |   };
 53 | ```
 54 | **触发搜索事件：**
 55 | 
 56 | ```js
 57 | onSearch(search) {
 58 |   //模拟数据库查询数据
 59 |   //这个search应该是传到后台,然后台来根据条件查询数据库
 60 |   alert('查询条件：'+JSON.stringify(search,null,4));
 61 | }
 62 | ```
 63 | 
 64 | 在该方法中进行条件过滤，更新组件 `data` 属性的值。
 65 | 
 66 | 直接运行该项目可以看当前组件的Example效果。
 67 | 
 68 | ![project.gif](https://github.com/azhengyongqin/iview-filter-table/blob/master/public/image/filterTable.gif)
 69 | 
 70 | ## Project setup
 71 | ```
 72 | yarn install
 73 | ```
 74 | 
 75 | ### Compiles and hot-reloads for development
 76 | ```
 77 | yarn run serve
 78 | ```
 79 | 
 80 | ### Compiles and minifies for production
 81 | ```
 82 | yarn run build
 83 | ```
 84 | 
 85 | ### Run your tests
 86 | ```
 87 | yarn run test
 88 | ```
 89 | 
 90 | ### Lints and fixes files
 91 | ```
 92 | yarn run lint
 93 | ```
 94 | 
 95 | ### Customize configuration
 96 | See [Configuration Reference](https://cli.vuejs.org/config/).
 97 | 
 98 | **Github源码地址**
 99 | https://github.com/azhengyongqin/iview-filter-table
100 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "iview-filter-table",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build"
 8 |   },
 9 |   "dependencies": {
10 |     "iview": "^3.0.1",
11 |     "vue": "^2.5.22"
12 |   },
13 |   "devDependencies": {
14 |     "@vue/cli-plugin-babel": "^3.4.0",
15 |     "@vue/cli-service": "^3.4.0",
16 |     "vue-cli-plugin-iview": "^1.0.6",
17 |     "vue-template-compiler": "^2.5.21"
18 |   },
19 |   "postcss": {
20 |     "plugins": {
21 |       "autoprefixer": {}
22 |     }
23 |   },
24 |   "browserslist": [
25 |     "> 1%",
26 |     "last 2 versions",
27 |     "not ie <= 8"
28 |   ]
29 | }
30 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azhengyongqin/iview-filter-table/35e7d5eb8fea48fcf9898b8b2aa493198799617d/public/favicon.ico


--------------------------------------------------------------------------------
/public/image/filterTable.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azhengyongqin/iview-filter-table/35e7d5eb8fea48fcf9898b8b2aa493198799617d/public/image/filterTable.gif


--------------------------------------------------------------------------------
/public/image/project.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azhengyongqin/iview-filter-table/35e7d5eb8fea48fcf9898b8b2aa493198799617d/public/image/project.gif


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>iview-filter-table</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but iview-filter-table doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <Example/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   import Example from './components/Example'
 9 |   export default {
10 |     name: 'App',
11 |     components: {
12 |       Example
13 |     }
14 |   }
15 | </script>
16 | 
17 | <style>
18 | </style>


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azhengyongqin/iview-filter-table/35e7d5eb8fea48fcf9898b8b2aa493198799617d/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/Example.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="hello">
  3 |     <filter-table @on-search="onSearch"
  4 |                   :data="users"
  5 |                   :columns="tableColumns">
  6 |     </filter-table>
  7 |   </div>
  8 | </template>
  9 | 
 10 | <script>
 11 |   import FilterTable from './FilterTable';
 12 |   const userStatus = {
 13 |     0: {
 14 |       value: 0,
 15 |       name: '全部'
 16 |     },
 17 |     1: {
 18 |       value: 1,
 19 |       name: '已锁定',
 20 |       color: 'red'
 21 |     },
 22 |     2: {
 23 |       value: 2,
 24 |       name: '正常',
 25 |       color: 'green'
 26 |     },
 27 |   };
 28 |   export default {
 29 |     name: 'Example',
 30 |     components: {FilterTable},
 31 |     data() {
 32 |       return {
 33 |         users: [],
 34 |         tableColumns: [
 35 |           {
 36 |             title: '用户名',
 37 |             key: 'username',
 38 |             filter: {
 39 |               type: 'Input'
 40 |             }
 41 |           },
 42 |           {
 43 |             title: '手机号',
 44 |             key: 'phone',
 45 |             filter: {
 46 |               type: 'Input'
 47 |             }
 48 |           },
 49 |           {
 50 |             title: '邮箱',
 51 |             key: 'email',
 52 |             filter: {
 53 |               type: 'Input'
 54 |             }
 55 |           },
 56 |           {
 57 |             title: '账户余额 (元)',
 58 |             key: 'money',
 59 |             filter: {
 60 |               type: 'Input'
 61 |             },
 62 |           },
 63 |           {
 64 |             title: '状态',
 65 |             key: 'status',
 66 |             filter: {
 67 |               type: 'Select',
 68 |               option: userStatus
 69 |             },
 70 |             render: (h, params) => {
 71 |               return h('Tag', {
 72 |                 slot: 'context',
 73 |                 props: {
 74 |                   color: this.formatStatus(params.row.status, userStatus).color
 75 |                 }
 76 |               }, this.formatStatus(params.row.status, userStatus).name)
 77 |             }
 78 |           },
 79 |         ],
 80 |       }
 81 |     },
 82 |     created() {
 83 |       this.users = [
 84 |         {
 85 |           username: '小明',
 86 |           phone: '17760172601',
 87 |           email: '1023007219@qq.com',
 88 |           money: '50',
 89 |           status: '1',
 90 |         }, {
 91 |           username: '小兰',
 92 |           phone: '17760172605',
 93 |           email: '1023007219@qq.com',
 94 |           money: '50',
 95 |           status: '2',
 96 |         }, {
 97 |           username: '小东',
 98 |           phone: '17761232601',
 99 |           email: '1023007219@qq.com',
100 |           money: '20',
101 |           status: '2',
102 |         }, {
103 |           username: '咱三',
104 |           phone: '17722226011',
105 |           email: '1023007219@qq.com',
106 |           money: '20',
107 |           status: '1',
108 |         }, {
109 |           username: '小明',
110 |           phone: '17760202601',
111 |           email: '1023007219@qq.com',
112 |           money: '20',
113 |           status: '1',
114 |         }, {
115 |           username: '尼斯',
116 |           phone: '17760172601',
117 |           email: '1023007219@qq.com',
118 |           money: '50',
119 |           status: '1',
120 |         }, {
121 |           username: '导航',
122 |           phone: '17760172601',
123 |           email: '1023007219@qq.com',
124 |           money: '20',
125 |           status: '1',
126 |         }, {
127 |           username: '但是还是',
128 |           phone: '17760172601',
129 |           email: '1023007219@qq.com',
130 |           money: '50',
131 |           status: '1',
132 |         },
133 |       ];
134 |     },
135 |     methods: {
136 |       /**
137 |        * 格式化状态
138 |        * @param value 状态值
139 |        * @param status 状态对象
140 |        * @returns {*} 返回状态
141 |        */
142 |       formatStatus(value, status) {
143 |         return status[value] || {value: '', name: ''};
144 |       },
145 |       onSearch(search) {
146 |         //模拟数据库查询数据
147 |         //这个search应该是传到后台,然后台来根据条件查询数据库
148 |         alert('查询条件：'+JSON.stringify(search,null,4));
149 |       }
150 |     },
151 |   }
152 | </script>
153 | 
154 | <style scoped>
155 | </style>


--------------------------------------------------------------------------------
/src/components/FilterTable.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <Table
  4 |       border
  5 |       :data="filters"
  6 |       :columns="tableColumnsFilters"
  7 |       stripe>
  8 |     </Table>
  9 | 
 10 |     <Table
 11 |       :show-header=false
 12 |       border
 13 |       :data="data"
 14 |       :columns="columns"
 15 |       stripe>
 16 |     </Table>
 17 |   </div>
 18 | </template>
 19 | 
 20 | <script>
 21 |   export default {
 22 |     name: "FilterTable",
 23 |     props: {
 24 |       columns: Array, //列描述数据对象
 25 |       data: Array     //表格数据
 26 |     },
 27 |     data() {
 28 |       return {
 29 |         filters: [{
 30 |           title: ''
 31 |         }],
 32 |         tableColumnsFilters: [],
 33 |         search: {},//过滤条件保存的对象,就是保存Input框和Select中值
 34 |       }
 35 |     },
 36 |     created() {
 37 |       for (let index in this.columns) {
 38 |         let filter = {};
 39 |         /**
 40 |          * 因为是采用的两个表的形式,过滤表中显示查询的Input,Select条件输组件,表头显示的是数据表的表头,渲染的数据是传入的columns中的filter字段
 41 |          * 数据表隐藏表头,只显示数据,渲染的数据是传入的columns中的key值
 42 |          */
 43 |         //将传入的列描述数据对象(columns) 的title和width 复制给 过滤表的列描述数据对象(tableColumnsFilters)
 44 |         this.$set(filter, 'title', this.columns[index].title);
 45 |         if (this.columns[index].width) {
 46 |           this.$set(filter, 'width', this.columns[index].width);
 47 |         }
 48 |         let render = (h) => {};
 49 |         /**
 50 |          * 需要有搜索的列, 只要在 列描述数据对象columns中配置 filter属性就行如下:
 51 |          {
 52 |             title: '名字',
 53 |             key: '_id',
 54 |             filter: {
 55 |               type: 'Input'
 56 |             }
 57 |           },
 58 |          {
 59 |            title: '交易金额 (元)',
 60 |            key: 'money',
 61 |            filter: {
 62 |              type: 'Select',
 63 |              option:status //选项
 64 |            }
 65 |          },
 66 |          */
 67 |         //如果存在 过滤选项
 68 |         if (this.columns[index].filter) {
 69 |           //过滤为 下拉选择框
 70 |           if (this.columns[index].filter.type && this.columns[index].filter.type === 'Select') {
 71 |             render = (h) => {
 72 |               return h(this.columns[index].filter.type, {
 73 |                 props: {
 74 |                   value: 0,//Select选项列表一般 0 为全部
 75 |                 },
 76 |                 on: {
 77 |                   'on-change': (val) => {
 78 |                     if (val === 0) {
 79 |                       //当选项是全部的时候删除 search中该字段的过滤条件
 80 |                       this.$delete(this.search, this.columns[index].key);
 81 |                       this.load();
 82 |                       return;
 83 |                     }
 84 |                     //添加字段过滤条件
 85 |                     this.$set(this.search, this.columns[index].key, val);
 86 |                     this.load();
 87 |                   }
 88 |                 }
 89 |               }, this.createOptionsRender(index, h));
 90 |             }
 91 |           } else {
 92 |             //如果是输入框
 93 |             render = (h) => {
 94 |               //获取输入框的值,为了减少数据库的压力,我这里是
 95 |               //通过回车和点击搜索按钮才进行数据过滤查询,如果
 96 |               //要输入框变化就进行过滤,把 this.load()放到
 97 |               //input事件方法就行了
 98 |               let inputValue = {};
 99 |               return h(this.columns[index].filter.type, {
100 |                 props: {
101 |                   placeholder: '输入' + this.columns[index].title,
102 |                   icon: 'ios-search-strong'
103 |                 },
104 |                 on: {
105 |                   input: val => {
106 |                     inputValue = val;
107 |                     if (!inputValue) {
108 |                       this.validInputValue(index, inputValue);
109 |                     }
110 |                   },
111 |                   //input框后面的搜索按钮的点击事件
112 |                   'on-click': () => {
113 |                     this.validInputValue(index, inputValue);
114 |                   },
115 |                   'on-enter': () => {
116 |                     this.validInputValue(index, inputValue);
117 |                   }
118 |                 }
119 |               })
120 |             };
121 |           }
122 |         }
123 |         this.$set(filter, 'render', render);
124 |         this.tableColumnsFilters.push(filter);
125 |       }
126 |     },
127 |     methods: {
128 |       createOptionsRender(index, h) {
129 |         //选项渲染
130 |         let optionRender = [];
131 |         if (this.columns[index].filter.option) {
132 |           let option = this.columns[index].filter.option;
133 |           for (let i in option) {
134 |             optionRender.push(h('Option', {
135 |               props: {
136 |                 value: option[i].value
137 |               }
138 |             }, option[i].name))
139 |           }
140 |         }
141 |         return optionRender;
142 |       },
143 |       //重新加载数据
144 |       load() {
145 |         //会执行一个load的事件
146 |         this.$emit('on-search',this.search);
147 |       },
148 |       //验证输入框的值
149 |       validInputValue(index, inputValue) {
150 |         if (!inputValue) {
151 |           this.$delete(this.search, this.columns[index].key);
152 |           this.load();
153 |           return;
154 |         }
155 |         this.$set(this.search, this.columns[index].key, inputValue);
156 |         this.load();
157 |       }
158 |     }
159 |   }
160 | </script>
161 | 
162 | <style scoped>
163 | </style>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import './plugins/iview.js'
 4 | 
 5 | Vue.config.productionTip = false
 6 | 
 7 | new Vue({
 8 |   render: h => h(App),
 9 | }).$mount('#app')
10 | 


--------------------------------------------------------------------------------
/src/plugins/iview.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import iView from 'iview'
3 | 
4 | Vue.use(iView)
5 | 
6 | import 'iview/dist/styles/iview.css'
7 | 


--------------------------------------------------------------------------------