自定义表单提交筛选分页怎么做_基于element-ui的后台系统表格、dialog、筛选、自定义按钮、分页的一次性封装...

方便基础业务开发封装的一套组件，基于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