├── index.js
├── package.json
├── LICENSE
├── components
    └── index.vue
└── README.md


/index.js:
--------------------------------------------------------------------------------
 1 | import Component from "./components/index.vue";
 2 | 
 3 | function install (Vue, options = {}) {
 4 |   if (install.installed) return;
 5 |   install.installed = true;
 6 | 
 7 |   Vue.component("vue-pro-table", Component);
 8 | }
 9 | Component.install = install;
10 | 
11 | // auto plugin install
12 | let GlobalVue = null;
13 | if (typeof window !== "undefined") {
14 |   GlobalVue = window.Vue;
15 | } else if (typeof global !== "undefined") {
16 |   GlobalVue = global.vue;
17 | }
18 | if (GlobalVue) {
19 |   GlobalVue.use(Component);
20 | }
21 | 
22 | // export default
23 | export default Component;
24 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-pro-table",
 3 |   "version": "1.1.1",
 4 |   "description": "一个基于ElementUI封装的table列表页组件，将包含搜索、列表、分页等功能的页面封装成一个组件",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/huzhushan/vue-pro-table.git"
12 |   },
13 |   "keywords": [
14 |     "vue-pro-table"
15 |   ],
16 |   "author": "huzhushan@126.com",
17 |   "license": "MIT",
18 |   "bugs": {
19 |     "url": "https://github.com/huzhushan/vue-pro-table/issues"
20 |   },
21 |   "homepage": "https://github.com/huzhushan/vue-pro-table#readme"
22 | }
23 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 ZSEN 
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/components/index.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 |  * @Descripttion: 基于ElementUI封装的table列表页组件（包含搜索、列表、分页功能）
  3 |  * @version: V1.0.0
  4 |  * @Author: huzhushan@126.com
  5 |  * @Date: 2021-02-04 13:24:16
  6 |  * @LastEditors: huzhushan@126.com
  7 |  * @LastEditTime: 2021-12-23 19:02:35
  8 | -->
  9 | <template>
 10 |   <div class="page-box">
 11 |     <!-- 搜索选项 -->
 12 | 
 13 |     <el-form
 14 |       v-if="!!search"
 15 |       class="search"
 16 |       :model="searchModel"
 17 |       :inline="true"
 18 |       label-position="left"
 19 |       :label-width="search.labelWidth"
 20 |       ref="searchForm"
 21 |     >
 22 |       <el-form-item
 23 |         v-for="item in search.fields"
 24 |         :key="item.name"
 25 |         :label="item.label"
 26 |         :prop="item.name"
 27 |       >
 28 |         <slot v-if="item.type === 'custom'" :name="item.slot" />
 29 |         <el-select
 30 |           v-else-if="item.type === 'select'"
 31 |           v-model="searchModel[item.name]"
 32 |           :filterable="!!item.filterable"
 33 |           :multiple="!!item.multiple"
 34 |           clearable
 35 |           :placeholder="`请选择${item.label}`"
 36 |           :style="{ width: search.inputWidth, ...item.style }"
 37 |         >
 38 |           <el-option
 39 |             v-for="option of item.options"
 40 |             :key="option.value"
 41 |             :label="option.name"
 42 |             :value="option.value"
 43 |           ></el-option>
 44 |         </el-select>
 45 |         <el-radio-group
 46 |           v-model="searchModel[item.name]"
 47 |           v-else-if="item.type === 'radio'"
 48 |           :style="{ width: search.inputWidth, ...item.style }"
 49 |         >
 50 |           <el-radio
 51 |             v-for="option of item.options"
 52 |             :key="option.value"
 53 |             :label="option.value"
 54 |             >{{ option.name }}</el-radio
 55 |           >
 56 |         </el-radio-group>
 57 |         <el-radio-group
 58 |           v-model="searchModel[item.name]"
 59 |           v-else-if="item.type === 'radio-button'"
 60 |           :style="{ width: search.inputWidth, ...item.style }"
 61 |         >
 62 |           <el-radio-button
 63 |             v-for="option of item.options"
 64 |             :key="option.value"
 65 |             :label="option.value"
 66 |             >{{ option.name }}</el-radio-button
 67 |           >
 68 |         </el-radio-group>
 69 |         <el-checkbox-group
 70 |           v-model="searchModel[item.name]"
 71 |           v-else-if="item.type === 'checkbox'"
 72 |           :style="{ width: search.inputWidth, ...item.style }"
 73 |         >
 74 |           <el-checkbox
 75 |             v-for="option of item.options"
 76 |             :key="option.value"
 77 |             :label="option.value"
 78 |             >{{ option.name }}</el-checkbox
 79 |           >
 80 |         </el-checkbox-group>
 81 |         <el-checkbox-group
 82 |           v-model="searchModel[item.name]"
 83 |           v-else-if="item.type === 'checkbox-button'"
 84 |           :style="{ width: search.inputWidth, ...item.style }"
 85 |         >
 86 |           <el-checkbox-button
 87 |             v-for="option of item.options"
 88 |             :key="option.value"
 89 |             :label="option.value"
 90 |             >{{ option.name }}</el-checkbox-button
 91 |           >
 92 |         </el-checkbox-group>
 93 |         <el-date-picker
 94 |           v-else-if="item.type === 'date'"
 95 |           v-model="searchModel[item.name]"
 96 |           type="date"
 97 |           value-format="yyyy-MM-dd"
 98 |           :placeholder="`请选择${item.label}`"
 99 |           :style="{ width: search.inputWidth, ...item.style }"
100 |         ></el-date-picker>
101 |         <el-date-picker
102 |           v-else-if="item.type === 'datetime'"
103 |           v-model="searchModel[item.name]"
104 |           type="datetime"
105 |           value-format="yyyy-MM-dd HH:mm:ss"
106 |           clearable
107 |           :placeholder="`请选择${item.label}`"
108 |           :style="{ width: search.inputWidth, ...item.style }"
109 |         ></el-date-picker>
110 |         <el-date-picker
111 |           v-else-if="item.type === 'daterange'"
112 |           v-model="searchModel[item.name]"
113 |           type="daterange"
114 |           value-format="yyyy-MM-dd"
115 |           range-separator="-"
116 |           start-placeholder="开始日期"
117 |           end-placeholder="结束日期"
118 |           clearable
119 |           @change="handleDateChange($event, item)"
120 |           :style="{ width: search.inputWidth, ...item.style }"
121 |         ></el-date-picker>
122 |         <el-date-picker
123 |           v-else-if="item.type === 'datetimerange'"
124 |           v-model="searchModel[item.name]"
125 |           type="datetimerange"
126 |           value-format="yyyy-MM-dd HH:mm:ss"
127 |           range-separator="-"
128 |           start-placeholder="开始时间"
129 |           end-placeholder="结束时间"
130 |           clearable
131 |           @change="handleDateChange($event, item)"
132 |           :style="{ width: search.inputWidth, ...item.style }"
133 |         ></el-date-picker>
134 |         <el-input-number
135 |           v-else-if="item.type === 'number'"
136 |           v-model="searchModel[item.name]"
137 |           :placeholder="`请输入${item.label}`"
138 |           controls-position="right"
139 |           :min="item.min"
140 |           :max="item.max"
141 |           :style="{ width: search.inputWidth, ...item.style }"
142 |         />
143 |         <el-input
144 |           v-else-if="item.type === 'textarea'"
145 |           type="textarea"
146 |           v-model="searchModel[item.name]"
147 |           clearable
148 |           :placeholder="`请输入${item.label}`"
149 |           :style="{ width: search.inputWidth, ...item.style }"
150 |         ></el-input>
151 |         <el-input
152 |           v-else
153 |           v-model="searchModel[item.name]"
154 |           :placeholder="`请输入${item.label}`"
155 |           clearable
156 |           :style="{ width: search.inputWidth, ...item.style }"
157 |         ></el-input>
158 |       </el-form-item>
159 |       <el-form-item class="search-btn">
160 |         <el-button type="primary" icon="el-icon-search" @click="handleSearch"
161 |           >查询</el-button
162 |         >
163 |         <el-button @click="handleReset" icon="el-icon-refresh-right"
164 |           >重置</el-button
165 |         >
166 |       </el-form-item>
167 |     </el-form>
168 | 
169 |     <!-- title 和 工具栏 -->
170 |     <div class="head" v-if="!hideTitleBar">
171 |       <slot name="title">
172 |         <span class="title">{{ title }}</span>
173 |       </slot>
174 |       <div class="toolbar">
175 |         <slot name="toolbar"></slot>
176 |       </div>
177 |     </div>
178 |     <!-- table表格栏 -->
179 |     <div class="table">
180 |       <el-table
181 |         v-loading="loading"
182 |         :data="tableData"
183 |         :row-key="rowKey"
184 |         :tree-props="tree.treeProps"
185 |         :lazy="tree.lazy"
186 |         :load="tree.load"
187 |         tooltip-effect="dark"
188 |         stripe
189 |         :border="border"
190 |         @selection-change="handleSelectionChange"
191 |         ref="table"
192 |       >
193 |         <el-table-column
194 |           v-for="item in columns"
195 |           :key="item.label"
196 |           :filter-method="item.filters && filterHandler"
197 |           :show-overflow-tooltip="!item.wrap"
198 |           v-bind="item"
199 |         >
200 |           <template #header="scope" v-if="!!item.labelSlot">
201 |             <slot :name="item.labelSlot" v-bind="scope"></slot>
202 |           </template>
203 |           <template #default="scope" v-if="!!item.tdSlot">
204 |             <slot :name="item.tdSlot" v-bind="scope"></slot>
205 |           </template>
206 |         </el-table-column>
207 |       </el-table>
208 |     </div>
209 |     <!-- 分页 -->
210 |     <el-pagination
211 |       v-if="paginationConfig.show && total > 0"
212 |       class="pagination"
213 |       :style="paginationConfig.style"
214 |       @size-change="handleSizeChange"
215 |       :current-page.sync="pageNum"
216 |       @current-change="handleCurrentChange"
217 |       :page-sizes="paginationConfig.pageSizes"
218 |       :page-size.sync="pageSize"
219 |       :layout="paginationConfig.layout"
220 |       :total="total"
221 |     ></el-pagination>
222 |   </div>
223 | </template>
224 | <script>
225 | const getSearchModel = (search) => {
226 |   const searchModel = {};
227 |   if (search && search.fields) {
228 |     search.fields.forEach((item) => {
229 |       switch (item.type) {
230 |         case "checkbox":
231 |         case "checkbox-button":
232 |           searchModel[item.name] = [];
233 |           break;
234 |         default:
235 |           break;
236 |       }
237 |       if (item.defaultValue !== undefined) {
238 |         searchModel[item.name] = item.defaultValue;
239 |         // 日期范围和时间范围真实变量默认值
240 |         if (
241 |           (item.type === "daterange" || item.type === "datetimerange") &&
242 |           !!item.trueNames &&
243 |           Array.isArray(item.defaultValue)
244 |         ) {
245 |           item.defaultValue.forEach((val, index) => {
246 |             searchModel[item.trueNames[index]] = val;
247 |           });
248 |         }
249 |       }
250 |     });
251 |   }
252 |   return searchModel;
253 | };
254 | export default {
255 |   props: {
256 |     // 请求数据的方法
257 |     request: {
258 |       type: Function,
259 |     },
260 |     // 表格标题
261 |     title: {
262 |       type: String,
263 |       default: "",
264 |     },
265 |     // 是否隐藏标题栏
266 |     hideTitleBar: {
267 |       type: Boolean,
268 |       default: false,
269 |     },
270 |     // 搜索表单配置，false表示不显示搜索表单
271 |     search: {
272 |       type: [Boolean, Object],
273 |       default: false,
274 |     },
275 |     border: {
276 |       type: Boolean,
277 |       default: false,
278 |     },
279 |     // 表头配置
280 |     columns: {
281 |       type: Array,
282 |       default: function (params) {
283 |         return [];
284 |       },
285 |     },
286 |     // 行数据的Key，同elementUI的table组件的row-key
287 |     rowKey: {
288 |       type: String,
289 |       default: "id",
290 |     },
291 |     // 分页配置，false表示不显示分页
292 |     pagination: {
293 |       type: [Boolean, Object],
294 |       default: () => ({}),
295 |     },
296 |     tree: {
297 |       type: Object,
298 |       default: () => ({}),
299 |     },
300 |   },
301 |   components: {},
302 |   data() {
303 |     let paginationConfig = {
304 |       show: false,
305 |     };
306 |     if (typeof this.pagination === "object") {
307 |       const { layout, pageSizes, style } = this.pagination;
308 |       paginationConfig = {
309 |         show: true,
310 |         layout: layout || "total, sizes, prev, pager, next, jumper",
311 |         pageSizes: pageSizes || [10, 20, 30, 40, 50, 100],
312 |         style: style || {},
313 |       };
314 |     }
315 | 
316 |     return {
317 |       searchModel: getSearchModel(this.search),
318 |       loading: false,
319 |       tableData: [],
320 |       total: 0,
321 |       pageNum: 1,
322 |       pageSize: (!!this.pagination && this.pagination.pageSize) || 10,
323 |       paginationConfig,
324 |     };
325 |   },
326 |   created() {
327 |     // 请求列表数据
328 |     this.getTableData();
329 |   },
330 |   methods: {
331 |     // 请求列表数据
332 |     async getTableData() {
333 |       this.loading = true;
334 |       const searchModel = this.optimizeFields(this.search);
335 |       const { data, total } = await this.request({
336 |         pageNum: this.pageNum,
337 |         pageSize: this.pageSize,
338 |         ...searchModel,
339 |       });
340 |       this.loading = false;
341 |       this.tableData = data;
342 |       this.total = total;
343 |     },
344 |     // 搜索
345 |     handleSearch() {
346 |       this.pageNum = 1;
347 |       this.getTableData();
348 |     },
349 |     // 重置函数
350 |     handleReset() {
351 |       if (JSON.stringify(this.searchModel) === "{}") {
352 |         return;
353 |       }
354 |       this.pageNum = 1;
355 |       this.searchModel = getSearchModel(this.search);
356 |       this.getTableData();
357 |     },
358 |     // 刷新
359 |     refresh() {
360 |       this.getTableData();
361 |     },
362 |     // 优化搜索字段，
363 |     // 1、如果搜索配置有transform处理函数，执行transform
364 |     // 2、删除日期范围默认的name字段
365 |     optimizeFields(search) {
366 |       const searchModel = JSON.parse(JSON.stringify(this.searchModel));
367 |       if (search && search.fields) {
368 |         search.fields.forEach((item) => {
369 |           if (!searchModel.hasOwnProperty(item.name)) {
370 |             return;
371 |           }
372 |           if (!!item.transform) {
373 |             searchModel[item.name] = item.transform(searchModel[item.name]);
374 |           }
375 |           if (
376 |             (item.type === "daterange" || item.type === "datetimerange") &&
377 |             !!item.trueNames
378 |           ) {
379 |             delete searchModel[item.name];
380 |           }
381 |         });
382 |       }
383 |       return searchModel;
384 |     },
385 |     // 当前页变化
386 |     handleCurrentChange(page) {
387 |       this.getTableData();
388 |     },
389 |     // 改变每页size数量
390 |     handleSizeChange(value) {
391 |       this.pageNum = 1;
392 |       this.getTableData();
393 |     },
394 |     // 全选
395 |     handleSelectionChange(arr) {
396 |       this.$emit("selectionChange", arr);
397 |     },
398 |     // 过滤方法
399 |     filterHandler(value, row, column) {
400 |       const property = column["property"];
401 |       return row[property] === value;
402 |     },
403 |     // 日期范围
404 |     handleDateChange(value, item) {
405 |       if (!item.trueNames) {
406 |         return;
407 |       }
408 | 
409 |       if (!!value) {
410 |         value.forEach((val, index) => {
411 |           this.searchModel[item.trueNames[index]] = val;
412 |         });
413 |       } else {
414 |         item.trueNames.forEach((key) => {
415 |           delete this.searchModel[key];
416 |         });
417 |       }
418 |     },
419 |   },
420 | };
421 | </script>
422 | <style lang="scss" scoped>
423 | .page-box {
424 |   width: 100%;
425 |   box-sizing: border-box;
426 |   .search {
427 |     padding: 20px 20px 0;
428 |     background: #fff;
429 |     margin-bottom: 10px;
430 |     display: flex;
431 |     flex-wrap: wrap;
432 |     .el-form-item {
433 |       margin-bottom: 20px;
434 |     }
435 |     .search-btn {
436 |       margin-left: auto;
437 |     }
438 |     ::v-deep {
439 |       .el-input-number .el-input__inner {
440 |         text-align: left;
441 |       }
442 |     }
443 |   }
444 |   .head {
445 |     display: flex;
446 |     justify-content: space-between;
447 |     align-items: center;
448 |     padding: 20px 20px 0;
449 |     background: #fff;
450 |     .title {
451 |       font-size: 16px;
452 |     }
453 |   }
454 |   .table {
455 |     padding: 20px;
456 |     background: #fff;
457 |     ::v-deep th {
458 |       background: #f6f6f6;
459 |       color: rgba(0, 0, 0, 0.85);
460 |     }
461 |   }
462 |   .pagination {
463 |     padding: 0 20px 20px;
464 |     background: #fff;
465 |     text-align: right;
466 |     :last-child {
467 |       margin-right: 0;
468 |     }
469 |   }
470 | }
471 | </style>
472 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-pro-table
  2 | 
  3 | > 本组件是基于 vue2 开发，如果你正在使用 vue3，请点击[vue3-pro-table](https://github.com/huzhushan/vue3-pro-table)查看 vue3 版的 pro-table 组件
  4 | 
  5 | 一个基于 ElementUI 封装的 table 列表页组件，将包含搜索、列表、分页等功能的页面封装成一个组件
  6 | 
  7 | ## 特性
  8 | 
  9 | - 将搜索、列表、分页三者的交互逻辑封装到组件中，节省开发者代码量
 10 | - 配置化的请求函数，自动发送请求，自动获取请求参数，自动显示 loading 效果
 11 | - 配置化的表格项，跟 el-table-column 的配置属性类似
 12 | - 配置化的搜索表单，支持大部分表单元素
 13 | - 配置化的分页，跟 el-pagination 的配置属性类似
 14 | - 自定义是否显示搜索和分页
 15 | - 自定义标题栏和工具栏
 16 | - 丰富的插槽提供功能扩展
 17 | 
 18 | ## 使用
 19 | 
 20 | ### 安装和引入
 21 | 
 22 | 安装
 23 | 
 24 | ```js
 25 | // npm
 26 | npm install vue-pro-table
 27 | // yarn
 28 | yarn add vue-pro-table
 29 | ```
 30 | 
 31 | 引入
 32 | 
 33 | > 该组件依赖 element-ui，需要自行引入
 34 | >
 35 | > ```js
 36 | > import ElementUI from "element-ui";
 37 | > import "element-ui/lib/theme-chalk/index.css";
 38 | > Vue.use(ElementUI);
 39 | > ```
 40 | 
 41 | ```js
 42 | // 引入vue-pro-table
 43 | import VueProTable from "vue-pro-table";
 44 | Vue.use(VueProTable);
 45 | ```
 46 | 
 47 | ### 快速使用
 48 | 
 49 | ```vue
 50 | <template>
 51 |   <vue-pro-table title="列表" :request="getList" :columns="columns">
 52 |     <template #operate="scope">
 53 |       <el-button size="mini" type="primary">编辑</el-button>
 54 |       <el-button size="mini" type="danger">删除</el-button>
 55 |     </template>
 56 |   </vue-pro-table>
 57 | </template>
 58 | 
 59 | <script>
 60 | import {getUserList} from 'src/api/xxx';
 61 | export default {
 62 |   data() {
 63 |     // 表格列配置，大部分属性跟el-table-column配置一样
 64 |     columns: [
 65 |       { label: '序号', type: 'index' },
 66 |       { label: '名称', prop: 'nickName', width: 180 },
 67 |       { label: '邮箱', prop: 'userEmail' },
 68 |       {
 69 |         label: '操作',
 70 |         fixed: 'right',
 71 |         width: 180,
 72 |         align: 'center',
 73 |         tdSlot: 'operate', // 自定义单元格内容的插槽名称
 74 |       },
 75 |     ],
 76 |   },
 77 |   methods: {
 78 |     // 请求函数
 79 |     async getList(params) {
 80 |       // params是从组件接收的，包含分页和搜索字段。
 81 |       const { data } = await getUserList(params)
 82 | 
 83 |       // 必须要返回一个对象，包含data数组和total总数
 84 |       return {
 85 |         data: data.list,
 86 |         total: +data.total,
 87 |       }
 88 |     },
 89 |   }
 90 | }
 91 | </script>
 92 | ```
 93 | 
 94 | 预览效果
 95 | 
 96 | > 默认不包含搜索表单
 97 | 
 98 | ![列表页](https://raw.githubusercontent.com/huzhushan/pics/master/vue-pro-table/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20210226101705.png)
 99 | 
100 | ### 请求函数配置
101 | 
102 | - request，请求列表数据的函数
103 | 
104 |   > 组件加载的时候会自动执行 request 函数，并在加载过程中显示 loading 效果
105 | 
106 |   - 函数接收参数：包含搜索表单的所有字段和分页的 pageNum 和 pageSize
107 | 
108 |   - 函数必须返回一个对象，包含:
109 |     - data: 列表数据的数组
110 |     - total：总数，用于分页
111 | 
112 | ### 表格配置
113 | 
114 | - border 表格是否有边框。布尔值，默认为 false
115 | 
116 | - columns 属性的配置，是一个数组
117 | 
118 | | 参数      | 说明                                                                                        | 类型                   | 可选值                 | 默认值 |
119 | | --------- | ------------------------------------------------------------------------------------------- | ---------------------- | ---------------------- | ------ |
120 | | label     | 对应 el-table-column 的 label                                                               | string                 | -                      | -      |
121 | | type      | 对应 el-table-column 的 type                                                                | string                 | selection/index/expand | -      |
122 | | prop      | 对应 el-table-column 的 prop                                                                | string                 | -                      | -      |
123 | | width     | 对应 el-table-column 的 width                                                               | string,number          | -                      | -      |
124 | | minWidth  | 对应 el-table-column 的 min-width                                                           | string,number          | -                      | -      |
125 | | align     | 对应 el-table-column 的 align                                                               | string                 | left/center/right      | left   |
126 | | fixed     | 对应 el-table-column 的 fixed                                                               | string, boolean        | true, left, right      | -      |
127 | | sortable  | 对应 el-table-column 的 sortable                                                            | boolean                | false/true             | false  |
128 | | filters   | 对应 el-table-column 的 filters                                                             | Array[{ text, value }] | -                      | -      |
129 | | tdSlot    | 单元格要自定义内容时，可以通过此属性配置一个插槽名称，并且是作用域插槽，可以接收 scope 数据 | string                 | -                      | -      |
130 | | labelSlot | 表头要自定义内容时，可以通过此属性配置一个插槽名称，并且是作用域插槽，可以接收 scope 数据   | string                 | -                      | -      |
131 | 
132 | - row-key 属性配置
133 | 
134 |   对应 el-table 的 row-key，默认值是'id'
135 | 
136 | ### 搜索配置
137 | 
138 | - search 属性的配置，是一个对象
139 | 
140 |   > 如果不想显示搜索表单，可以不配置 search 或者 search 设置为 false
141 | 
142 | | 参数       | 说明                                                                                      | 类型              | 可选值 | 默认值 |
143 | | ---------- | ----------------------------------------------------------------------------------------- | ----------------- | ------ | ------ |
144 | | labelWidth | label 文字长度                                                                            | string            | -      | -      |
145 | | inputWidth | 表单项长度                                                                                | string            | -      | -      |
146 | | fields     | 表单字段列表，包含 text，select，radio，checkbox，datetime 等类型，所有字段类型配置见下表 | Array[{字段类型}] | -      | -      |
147 | 
148 | - fields 列表的字段类型配置
149 | 
150 | | 参数         | 说明                                                                                                                                                                                                                                                      | 类型                 | 可选值                                                                                                        | 默认值 |
151 | | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------- | ------ |
152 | | type         | 字段类型                                                                                                                                                                                                                                                  | string               | text,textarea,select,radio,radio-button,checkbox,checkbox-button,number,date,daterange,datetime,datetimerange | text   |
153 | | label        | label 文本                                                                                                                                                                                                                                                | string               | -                                                                                                             | -      |
154 | | name         | 搜索时的提交的参数名称                                                                                                                                                                                                                                    | string               | -                                                                                                             | -      |
155 | | style        | 额外的样式                                                                                                                                                                                                                                                | object               | -                                                                                                             | -      |
156 | | defaultValue | 默认值                                                                                                                                                                                                                                                    | -                    | -                                                                                                             |        |
157 | | options      | 当 type 是 select,radio,radio-button,checkbox,checkbox-button 时的枚举选项                                                                                                                                                                                | Array[{name, value}] | -                                                                                                             | -      |
158 | | filterable   | 当 type 是 select 时，下拉框是否支持模糊搜索                                                                                                                                                                                                              | boolean              | true, false                                                                                                   | false  |
159 | | multiple     | 当 type 是 select 时，下拉框是否支持多选                                                                                                                                                                                                                  | boolean              | true, false                                                                                                   | false  |
160 | | transform    | 搜索前对表单数据进行转换，比如表单数据是数组，但是搜索的时候需要传递字符串。它是一个函数，默认参数是字段的 value，需要返回转换后的结果                                                                                                                    | function(value)      | -                                                                                                             | -      |
161 | | trueNames    | 当 type 是 daterange,datetimerange 时，开始时间和结束时间是在一个数组里面，但是搜索时可能需要两个字段，这时就需要把开始时间和结束时间分别赋值给两个字段，这两个字段的名称就是通过 trueNames 配置，它是一个数组，例如：trueNames: ['startTime', 'endTime'] | Array[string]        |                                                                                                               |        |
162 | | min          | 当 type 是 number 时的最小值                                                                                                                                                                                                                              | number               | -                                                                                                             | -      |
163 | | max          | 当 type 是 number 时的最大值                                                                                                                                                                                                                              | number               | -                                                                                                             | -      |
164 | 
165 | ### 分页配置
166 | 
167 | - pagination 属性的配置，是一个对象
168 | 
169 |   > 如果不想显示分页，将 pagination 设置为 false
170 | 
171 | | 参数      | 说明                         | 类型          | 可选值                                  | 默认值                                  |
172 | | --------- | ---------------------------- | ------------- | --------------------------------------- | --------------------------------------- |
173 | | layout    | 组件布局                     | string        | total, sizes, prev, pager, next, jumper | total, sizes, prev, pager, next, jumper |
174 | | pageSize  | 每页显示条目个数             | number        | -                                       | 10                                      |
175 | | pageSizes | 每页显示个数选择器的选项设置 | Array[number] | -                                       | [10, 20, 30, 40, 50, 100]               |
176 | 
177 | ### 标题栏配置
178 | 
179 | > 表格上方有一个标题栏，标题栏左侧显示一个标题，右侧是一个可自定义的工具栏
180 | 
181 | - hide-title-bar
182 | 
183 |   是否隐藏标题栏，布尔值
184 | 
185 | - title
186 | 
187 |   表格标题
188 | 
189 | - 自定义表格标题
190 | 
191 |   提供一个具名插槽 title，来自定义标题的内容
192 | 
193 | - 工具栏
194 | 
195 |   工具栏默认是空的，提供一个具名插槽 toolbar，来自定义工具栏的内容
196 | 
197 | ### 事件
198 | 
199 | - selectionChange
200 | 
201 |   如果 columns 中配置了 type 为 selection 的列，可以通过该事件得到已选择的行，参数是一个数组
202 | 
203 | ### 组件内部方法
204 | 
205 | - refresh
206 | 
207 |   配置 ref 属性，可以通过 ref 获取组件后调用组件内部的**refresh**方法刷新列表
208 | 
209 | ### 完整用法
210 | 
211 | ```vue
212 | <template>
213 |   <vue-pro-table
214 |     ref="proTable"
215 |     title="用户列表"
216 |     :request="getList"
217 |     :columns="columns"
218 |     :search="searchConfig"
219 |     :pagination="paginationConfig"
220 |     @selectionChange="handleSelectionChange"
221 |   >
222 |     <!-- 工具栏 -->
223 |     <template #toolbar>
224 |       <el-button
225 |         type="primary"
226 |         icon="el-icon-plus"
227 |         @click="$router.push({ name: 'userAdd' })"
228 |         >创建账号</el-button
229 |       >
230 |       <el-button
231 |         type="danger"
232 |         icon="el-icon-refresh"
233 |         @click="$refs.proTable.refresh()"
234 |         >刷新</el-button
235 |       >
236 |     </template>
237 | 
238 |     <!-- 展开行 -->
239 |     <template #expand="{ row }">
240 |       {{ row.userEmail }}
241 |     </template>
242 | 
243 |     <!-- 状态 -->
244 |     <template #status="{ row }">
245 |       <el-tag :type="+row.status === 1 ? 'success' : 'info'">{{
246 |         +row.status === 1 ? "启用" : "停用"
247 |       }}</el-tag>
248 |     </template>
249 | 
250 |     <!-- 表格操作栏 -->
251 |     <template #page-operate="{ row }">
252 |       <el-button
253 |         type="text"
254 |         @click="
255 |           $router.push({
256 |             name: 'userEdit',
257 |             params: {
258 |               id: row.id,
259 |             },
260 |           })
261 |         "
262 |         >编辑</el-button
263 |       >
264 | 
265 |       <el-button
266 |         v-if="+row.status === 1"
267 |         type="text"
268 |         @click="setUserStatus(row, 0)"
269 |         >停用</el-button
270 |       >
271 | 
272 |       <el-button v-else type="text" @click="setUserStatus(row, 1)"
273 |         >启用</el-button
274 |       >
275 |     </template>
276 | 
277 |     <!-- 操作栏头部 -->
278 |     <template #th-operate>
279 |       <el-input />
280 |     </template>
281 |   </vue-pro-table>
282 | </template>
283 | 
284 | <script>
285 | import {getUserList} from 'src/api/xxx';
286 | export default {
287 |   data() {
288 |     // 表格列配置，大部分属性跟el-table-column配置一样
289 |     columns: [
290 |         { label: '', type: 'expand', tdSlot: 'expand' },
291 |         { label: '全选', type: 'selection' },
292 |         { label: '序号', type: 'index' },
293 |         { label: '账户名称', prop: 'nickName', sortable: true },
294 |         { label: '账号', prop: 'userEmail', width: 80 },
295 |         {
296 |           label: '状态',
297 |           prop: 'status',
298 |           tdSlot: 'status',
299 |           filters: [
300 |             { text: '启用', value: 1 },
301 |             { text: '禁用', value: 0 },
302 |           ],
303 |         },
304 |         { label: '创建时间', prop: 'createTime', align: 'right' },
305 |         { label: '最后修改时间', prop: 'updateTime' },
306 |         {
307 |           label: '操作',
308 |           labelSlot: 'th-operate',
309 |           fixed: 'right',
310 |           width: 180,
311 |           align: 'center',
312 |           tdSlot: 'page-operate',
313 |         },
314 |     ],
315 |     // 搜索配置
316 |     searchConfig: {
317 |         labelWidth: '90px',
318 |         inputWidth: '360px',
319 |         fields: [
320 |           {
321 |             type: 'text',
322 |             label: '账户名称',
323 |             name: 'nickName',
324 |             defaultValue: 'abc',
325 |           },
326 |           {
327 |             type: 'textarea',
328 |             label: '描述',
329 |             name: 'description',
330 |           },
331 |           {
332 |             label: '状态',
333 |             name: 'status',
334 |             type: 'select',
335 |             defaultValue: 1,
336 |             options: [
337 |               {
338 |                 name: '已发布',
339 |                 value: 1,
340 |               },
341 |               {
342 |                 name: '未发布',
343 |                 value: 0,
344 |               },
345 |             ],
346 |           },
347 |           {
348 |             label: '性别',
349 |             name: 'sex',
350 |             type: 'radio',
351 |             options: [
352 |               {
353 |                 name: '男',
354 |                 value: 1,
355 |               },
356 |               {
357 |                 name: '女',
358 |                 value: 0,
359 |               },
360 |             ],
361 |           },
362 |           {
363 |             label: '城市',
364 |             name: 'city',
365 |             type: 'radio-button',
366 |             options: [
367 |               {
368 |                 name: '北京',
369 |                 value: 'bj',
370 |               },
371 |               {
372 |                 name: '上海',
373 |                 value: 'sh',
374 |               },
375 |               {
376 |                 name: '广州',
377 |                 value: 'gz',
378 |               },
379 |               {
380 |                 name: '深圳',
381 |                 value: 'sz',
382 |               },
383 |             ],
384 |           },
385 |           {
386 |             label: '爱好',
387 |             name: 'hobby',
388 |             type: 'checkbox',
389 |             defaultValue: ['吃饭'],
390 |             options: [
391 |               {
392 |                 name: '吃饭',
393 |                 value: '吃饭',
394 |               },
395 |               {
396 |                 name: '睡觉',
397 |                 value: '睡觉',
398 |               },
399 |               {
400 |                 name: '打豆豆',
401 |                 value: '打豆豆',
402 |               },
403 |             ],
404 |             transform: (val) => val.join(','),
405 |           },
406 |           {
407 |             label: '水果',
408 |             name: 'fruit',
409 |             type: 'checkbox-button',
410 |             options: [
411 |               {
412 |                 name: '苹果',
413 |                 value: '苹果',
414 |               },
415 |               {
416 |                 name: '香蕉',
417 |                 value: '香蕉',
418 |               },
419 |               {
420 |                 name: '橘子',
421 |                 value: '橘子',
422 |               },
423 |               {
424 |                 name: '葡萄',
425 |                 value: '葡萄',
426 |               },
427 |             ],
428 |             transform: (val) => val.join(','),
429 |           },
430 |           {
431 |             label: '日期',
432 |             name: 'date',
433 |             type: 'date',
434 |           },
435 |           {
436 |             label: '时间',
437 |             name: 'datetime',
438 |             type: 'datetime',
439 |             defaultValue: '2020-10-10 8:00:00',
440 |           },
441 |           {
442 |             label: '日期范围',
443 |             name: 'daterange',
444 |             type: 'daterange',
445 |             trueNames: ['startDate', 'endDate'],
446 |             style: { width: '360px' },
447 |           },
448 |           {
449 |             label: '时间范围',
450 |             name: 'datetimerange',
451 |             type: 'datetimerange',
452 |             trueNames: ['startTime', 'endTime'],
453 |             style: { width: '360px' },
454 |             defaultValue: ['2020-10-10 9:00:00', '2020-10-11 18:30:00'],
455 |           },
456 |           {
457 |             label: '数量',
458 |             name: 'num',
459 |             type: 'number',
460 |             min: 0,
461 |             max: 10,
462 |           },
463 |         ],
464 |     },
465 |     // 分页配置
466 |     paginationConfig: {
467 |       layout: 'total, prev, pager, next, sizes', // 分页组件显示哪些功能
468 |       pageSize: 5, // 每页条数
469 |       pageSizes: [5, 10, 20, 50],
470 |     }
471 |   },
472 |   methods: {
473 |     // 请求函数
474 |     async getList(params) {
475 |       // params是从组件接收的，包含分页和搜索字段。
476 |       const { data } = await getUserList(params)
477 | 
478 |       // 必须要返回一个对象，包含data数组和total总数
479 |       return {
480 |         data: data.list,
481 |         total: +data.total,
482 |       }
483 |     },
484 |     // 选择
485 |     handleSelectionChange(arr) {
486 |       console.log(arr)
487 |     },
488 |   }
489 | }
490 | </script>
491 | ```
492 | 
493 | 效果：
494 | 
495 | ![完整用法](https://raw.githubusercontent.com/huzhushan/pics/master/vue-pro-table/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20210302144535.png)
496 | 


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