方便基础业务开发封装的一套组件,基于vue2.5.x和element-ui,可以通过配置自动生成表格展示,表格新增、编辑功能、分页、筛选项、自定义显示表格数据等功能。
先上演示图片
----------------------------------
筛选部分
-----------------------------------------------------------
自定义按钮部分
--------------------------------
表格主体部分
------------
整体效果
以下为代码部分,都比较基础简单,就直接贴代码了
分别有,baseTable,baseDialogForm,customDisplay,filterGroup 4个小组件组成
baseTable部分(表格主体)
1 2
3
4
5 for="item in topBtnConfig" :key="item.title" :to="item.jumpPage?item.jumpAddress:''">
6 if="item.jumpPage">{{item.title}}
7 else>{{item.title}}
8
9
10
11 更新数据
12
13
14 table
15 class="baseTable"
16 :data="tableData"
17 border18 size="small"
19 v-loading="loading"
20 tooltip-effect="dark"
21 ref="table"
22 @selection-change="handleSelectionChange"
23 >
24 if="otherConfig.needSelect">
25 column
26 v-for="(item,index) in tableConfig"
27 :key="index"
28 :prop="item.prop"
29 :label="item.label"
30 :width="item.width?item.width:''"
31 :min-width="item.minWidth?item.minWidth:''"
32 :sortable="item.sortable?true:false"
33 v-if="customDisplayList[index].show"
34 >
35 36 if="item.render" :row="scope.row" :column="item" :index="scope.$index" :render="item.render">
37 else>{{scope.row[item.prop]}}
38
39
40 if="tableBtnConfig.width" :width="tableBtnConfig.width" fixed="right" class-name="btns">
41 42
43 button
44 @click="handleEmit(item.emitName, scope.row)"
45 v-if="tableBtnConfig.expands && tableBtnConfig.expands.length>0"
46 v-for="(item,index) in tableBtnConfig.expands"
47 :key="index"
48 :type="item.type?item.type:'primary'"
49 >{{item.name}}
50 if="tableBtnConfig.update&&!tableBtnConfig.isUpdateInNewPage" @click="createOrUpdate(scope.row)">编辑
51 else-if="tableBtnConfig.update&&tableBtnConfig.isUpdateInNewPage" @click="goTo(scope.row.id,tableBtnConfig.updateAddress)">编辑
52 if="tableBtnConfig.delete" @click.native="deleteItem(scope.row.id)">删除
53
54
55
56
57
58 if="otherConfig.needSelect" type="info" @click="toggleSelection(tableData)">全选
59 if="otherConfig.needSelect" type="info" @click="batchDelete()">批量删除
60
61
62
63
65 :width="formWidth"
66 ref="dialogForm"
67 :config="formConfig"
68 :form-data="formModel"
69 :err-form="formError"
70 :is-edit="isEdit"
71 @submit="dialogSubmit"
72 >
73
74
75
76
307
308
View Code
customDisplay部分(自定义显示按钮)
1 2
3 自定义显示
4
if="customDisplayShow">
5 6
当前展示的信息
7
8 全选
9
10
for="(item,index) in list" :key="index">
11 {{item.label}}
12
13
14
15
16
17
18
19
20
60
View Code
baseDialogForm部分(基于表格的弹出框表单)
1 2 3 4 5 for="(item,index) in config" :key="index">
6 7
8 input
9 v-if="item.type === 'text' || item.type === 'password' || item.type === 'textarea'"
10 :type="item.type"
11 v-model="formData[item.prop]"
12 :placeholder="item.placeholder?item.placeholder:'请输入'"
13 >
14
15 if="item.type === 'el-input-number'" v-model="formData[item.prop]" :min="1" :step="1" label="描述文字">
16
17 if="item.type === 'checkbox'" v-model="formData[item.prop]" :placeholder="item.placeholder?item.placeholder:'请选择'">
18 for="option in item.data" :label="option.id" :key="option.id">{{option.name}}
19
20
21 if="item.type === 'radio'" v-model="formData[item.prop]" :placeholder="item.placeholder?item.placeholder:'请选择'">
22 for="option in item.data" :label="option.id" :key="option.id">{{option.name}}
23
24
25 if="item.type === 'select'" v-model="formData[item.prop]" :placeholder="item.placeholder?item.placeholder:'请选择'">
26 for="option in item.data" :key="option.id" :label="option.label" :value="option.id">
27
28 if="item.type === 'datepicker'" v-model="formData[item.prop]" type="date" :placeholder="item.placeholder?item.placeholder:'请选择日期'">
29
30
31
32
33
34 35 取 消
36 确 定
37
38
39
40
41
100
101
View Code
filterGroup部分(表格上方筛选项集合)
1 2
3
4
5 6 if="filterOptions.search">
7
8 9
if="search_list[0]">
10
支持的搜索条件
11 12
for="(item, index) in search_list" :key="index">{{item}}
13
14
15 else>暂无可搜索项
16
17
18 if="filterOptions.classify">
19 20 for="(item,index) in classifyList" :key="item.value" :label="item.label" :value="item.value">
21
22
23 if="filterOptions.year">
24 25 for="(item,index) in years" :key="index" :label="item" :value="item">
26
27
28 if="filterOptions.activation">
29 30 for="(item,index) in activationList" :key="index.value" :label="item.label" :value="item.value">
31
32
33 if="filterOptions.examine">
34 35 for="(item,index) in examineList" :key="index.value" :label="item.label" :value="item.value">
36
37
38 if="filterOptions.operator">
39 40 for="(item,index) in operatorList" :key="index.value" :label="item.label" :value="item.value">
41
42
43 if="filterOptions.event">
44 45 for="(item,index) in eventList" :key="index.value" :label="item.label" :value="item.value">
46
47
48 if="filterOptions.recommend">
49
50
51 if="filterOptions.date_scope" class="date-filter">
52 picker
53 v-model="filterData.date_scope"
54 type="daterange"
55 align="right"
56 unlink-panels57 range-separator="至"
58 start-placeholder="开始日期"
59 end-placeholder="结束日期"
60 format="yyyy-MM-dd"
61 value-format="yyyy-MM-dd"
62 >
63
64 if="!sure">
65 查 询
66 button
67 v-if="open_btn_show"
68 type="primary"
69 plain70 @click="open = !open;btn_text = !open?'展开':'收起'"
71 :icon="!open?'el-icon-arrow-down':'el-icon-arrow-up'"
72 >{{btn_text}}
73
74 else>
75 确 定
76
77
78
79
80
if="filter_arr[0]">
81 82
83
84 检索项:
85
86
for="item in filter_arr" :key="item.key" v-if="item.title">
87 {{`${item.title} : ${item.value}`}}
88
89
if="showClearAllBtn !== false">清空
90
91
92
93
94
95
View Code
页面调用
1 2
3
4
6 :table-config="configData.tableConfig"
7 :top-btn-config="configData.topBtnConfig"
8 :table-btn-config="configData.tableBtnConfig"
9 :other-config="configData.otherConfig"
10 :filter-config="configData.filterConfig"
11 :grid-edit-width="200"
12 form-title="会员"
13 form-width="40%"
14 :form-config="configData.formConfig"
15 :form-data="configData.formModel"
16 @checkRegistration="checkRegistration"
17 ref="basetable"
18 >
19
20
21