️本文为博客园社区首发文章,未获授权禁止转载

大家好,我是aehyok,一个住在深圳城市的佛系码农‍♀️,如果你喜欢我的文章,可以通过点赞帮我聚集灵力️。

个人github仓库地址: https:github.com/aehyok

本文讲解代码仓库地址 : https:github.com/aehyok/vue-qiankun 目前基于dev分支进行开发和测试

本demo已部署腾讯云 http://vue.tuokecat.com(服务器配置较低,如有访问比较慢,请耐心等待)

table封装路径为根路径下的 vue-qiankun/common/components/form/

form表单json配置生成器

  • 1、 在PC端日常的使用中,使用最多的莫过于表单和列表了,故此对table列表和form表单进行了统一的封装,通过json配置就可以快速适配table列表和form表单。

  • 2、本章节主要记录自己的form表单封装

  • 3、封装思路

    • A、根据布局,一行一列默认可不设置(columnSpan设置为24),一行两列可设置参数columnSpan设置为12,后续以此类推

    • B、根据不同的字段类型,分别对应子组件进行渲染

    • C、子组件根据不同的类型,以及配置的类型字段进行渲染和数据绑定

    • D、子组件可以设置必填项和rules表单验证规则

    • E、可以通过设置字段的值,去控制其他字段的展示和隐藏

    • F、下拉等字典类型数据,可统一设置读取接口数据,也可以根据需要进行传递当前数组数据

    • G、图片上传可设置上传接口,并可设置上传多张图片

    • H、富文本编辑器也可以作为组件嵌入表单

    • I、 ......


先来一个完整的效果展示

  • 1、form表单配置json
  1. {
  2. "formListItem": [
  3. {
  4. "name": "name1",
  5. "type": "text",
  6. "title": "栏目标题",
  7. "required": true
  8. },
  9. {
  10. "name": "name",
  11. "type": "text",
  12. "title": "栏目名称"
  13. },
  14. {
  15. "name": "total",
  16. "type": "number",
  17. "title": "栏目数量",
  18. "required": true
  19. },
  20. {
  21. "name": "count",
  22. "type": "number",
  23. "title": "浏览数量"
  24. },
  25. {
  26. "name": "descript",
  27. "type": "textarea",
  28. "title": "备注",
  29. "required": true,
  30. "rows": 3
  31. },
  32. {
  33. "name": "content",
  34. "type": "textarea",
  35. "title": "内容",
  36. "rows": 3
  37. },
  38. {
  39. "name": "startDate",
  40. "type": "date",
  41. "title": "开始日期",
  42. "required": true
  43. },
  44. {
  45. "name": "endDate",
  46. "type": "date",
  47. "title": "结束日期"
  48. },
  49. {
  50. "name": "isValid",
  51. "type": "switch",
  52. "title": "是否有效"
  53. },
  54. {
  55. "name": "isExpired",
  56. "type": "switch",
  57. "title": "是否过期",
  58. "required": true
  59. },
  60. {
  61. "name": "type",
  62. "type": "radio",
  63. "dictionary": [
  64. {
  65. "code": 1,
  66. "name": "横版栏目"
  67. },
  68. {
  69. "code": 2,
  70. "name": "竖版栏目"
  71. }
  72. ],
  73. "title": "栏目类型",
  74. "controls": [
  75. {
  76. "value": 1,
  77. "showCondition": [
  78. {
  79. "name": "show",
  80. "type": "radio",
  81. "dictionary": [
  82. {
  83. "code": 1,
  84. "name": "China"
  85. },
  86. {
  87. "code": 2,
  88. "name": "English"
  89. }
  90. ],
  91. "title": "测试类型",
  92. "required": true
  93. },
  94. {
  95. "name": "image1",
  96. "type": "ImageTypeView",
  97. "title": "文件"
  98. }
  99. ]
  100. },
  101. {
  102. "value": 2,
  103. "showCondition": [
  104. {
  105. "name": "isValids",
  106. "type": "switch",
  107. "title": "是否有效"
  108. }
  109. ]
  110. }
  111. ]
  112. },
  113. {
  114. "name": "requireType",
  115. "type": "radio",
  116. "dictionary": [
  117. {
  118. "code": 1,
  119. "name": "类型一"
  120. },
  121. {
  122. "code": 2,
  123. "name": "类型二"
  124. }
  125. ],
  126. "title": "图文类型",
  127. "required": true
  128. },
  129. {
  130. "name": "range",
  131. "type": "checkbox",
  132. "title": "发布范围",
  133. "dictionary": [
  134. {
  135. "code": 1,
  136. "name": "范围一"
  137. },
  138. {
  139. "code": 2,
  140. "name": "范围二"
  141. }
  142. ],
  143. "required": true
  144. },
  145. {
  146. "name": "dateRange",
  147. "type": "daterange",
  148. "title": "日期范围"
  149. },
  150. {
  151. "name": "creType",
  152. "type": "select",
  153. "dictionary": [
  154. {
  155. "code": 1,
  156. "name": "身份证"
  157. },
  158. {
  159. "code": 2,
  160. "name": "居住证"
  161. }
  162. ],
  163. "title": "证件类型"
  164. },
  165. {
  166. "name": "image",
  167. "type": "image",
  168. "title": "头像"
  169. }
  170. ],
  171. "formData": {
  172. "name": "主菜单栏目",
  173. "total": null,
  174. "count": null,
  175. "createDate": 1606730360386,
  176. "type": 1,
  177. "creType": "",
  178. "range": [],
  179. "isExpired": false,
  180. "isValid": true
  181. }
  182. }
  • 2、 最后的效果图片

效果展示的在线预览页面为 http://vue.tuokecat.com/#/webpack-app/form

具体代码可根据路由进行搜索

字段配置详细介绍

1、静态文本 static

  1. ```javascript
  2. {
  3. type: "static", // 字段类型只读文本
  4. name: "name", //与后台对接字段
  5. title: "名称", // 前端展示字段
  6. },
  7. ```

2、文本框 text

  1. ```javascript
  2. {
  3. type: "text", // 字段类型文本框
  4. name: "name", //与后台对接字段
  5. title: "域名", // 前端展示字段
  6. required: true, // 必填项设置
  7. maxlength: 50, // 字符串长度限制
  8. showwordlimit: true, // 是否显示字符串长度
  9. placeholder:"请输入10个字符以内的名称", // 占位文本提示
  10. append: ".com", // 文本框后置内容
  11. // rules // 数组
  12. rules: [
  13. { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入数字最多两位小数' }
  14. ],
  15. },
  16. ```

3、文本域 textarea

  1. ```javascript
  2. {
  3. type: "textarea", // 字段类型文本域
  4. name: "name", //与后台对接字段
  5. title: "备注", // 前端展示字段
  6. required: true, // 必填项设置
  7. placeholder:"请输入10个字符以内的名称", // 占位文本提示
  8. rows: 4, // 输入框行数
  9. minlength: 100, // 最小输入长度
  10. maxlength: 5000, // 最大输入长度
  11. showwordlimit: true, // 是否显示字符串长度
  12. // rules // 数组
  13. rules: [
  14. { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入数字最多两位小数' }
  15. ],
  16. },
  17. ```

4、下拉框 select

  1. ```javascript
  2. {
  3. type: "select", // 字段类型下拉框
  4. name: "options", //与后台对接字段
  5. title: "类型", // 前端展示字段
  6. required: true, // 必填项设置
  7. placeholder:"请选择类型", // 占位文本提示
  8. // dictionary 可直接传递下拉数据,也可以传递字典中的typeCode,通过内部接口获取
  9. dictionary: 7010, // 7010为字典中维护的typecode
  10. dictionary:[
  11. {
  12. code: 1, name:"图片",
  13. },
  14. {
  15. code: 2, name:"视频"
  16. }
  17. ],
  18. multiple: true, // 下拉列表可以多选
  19. // rules // 正则匹配
  20. rules: [
  21. { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '只能选择*******' }
  22. ],
  23. // 点击下来触发切换联动的事件,为一个函数
  24. changeFunction: function(){}
  25. },
  26. ```

5、富文本 editor

  1. ```javascript
  2. {
  3. type: "editor", // 字段类型富文本
  4. name: "content", //与后台对接字段
  5. title: "内容", // 前端展示字段
  6. required: true, // 必填项设置
  7. placeholder:"请选择类型", // 占位文本提示
  8. // rules // 正则匹配
  9. rules: [
  10. { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '只能选择*******' }
  11. ],
  12. maxLength:5000, // 富文本框最大长度,默认5000
  13. },
  14. ```

6、数值框 number

  1. ```javascript
  2. {
  3. type: "number", // 字段类型数值
  4. name: "num", //与后台对接字段
  5. title: "总数", // 前端展示字段
  6. required: true, // 必填项设置
  7. placeholder:"请输入10个字符以内的名称", // 占位文本提示
  8. precision: 2, // 小数点后的位数
  9. // rules // 数组
  10. rules: [
  11. { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入数字最多两位小数' }
  12. ],
  13. },
  14. ```

7、省市区三级级联选择 citySelect

  1. ```javascript
  2. {
  3. type: "citySelect", // 字段类型省市区
  4. name: "region", //与后台对接字段
  5. title: "户籍地", // 前端展示字段
  6. required: true, // 必填项设置
  7. placeholder:"请输入10个字符以内的名称", // 占位文本提示
  8. // rules // 数组
  9. rules: [
  10. { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入数字最多两位小数' }
  11. ],
  12. },
  13. ```

8、 图片上传 image

  1. ```javascript
  2. {
  3. type: "image", // 字段类型图片
  4. name: "images", //与后台对接字段
  5. title: "上传图片", // 前端展示字段
  6. required: true, // 必填项设置
  7. placeholder:"请上传图片", // 占位文本提示
  8. // rules // 数组
  9. rules: [
  10. { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入数字最多两位小数' }
  11. ],
  12. },
  13. ```

9、 视频上传 video

  1. ```javascript
  2. {
  3. type: "video", // 字段类型视频
  4. name: "images", //与后台对接字段
  5. title: "上传视频", // 前端展示字段
  6. required: true, // 必填项设置
  7. placeholder:"请上传视频", // 占位文本提示
  8. // rules // 数组
  9. rules: [
  10. { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入数字最多两位小数' }
  11. ],
  12. },
  13. ```

10、 日期 date

  1. ```javascript
  2. {
  3. type: "date", // 字段类型日期
  4. name: "date", //与后台对接字段
  5. title: "日期", // 前端展示字段
  6. required: true, // 必填项设置
  7. placeholder:"请选择日期", // 占位文本提示
  8. // rules // 数组
  9. rules: [
  10. { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入数字最多两位小数' }
  11. ],
  12. },
  13. ```

11、 日期范围 daterange

  1. ```javascript
  2. {
  3. type: "daterange", // 字段类型日期
  4. name: "date", //与后台对接字段
  5. title: "日期范围", // 前端展示字段
  6. required: true, // 必填项设置
  7. placeholder:"请选择日期", // 占位文本提示
  8. // rules // 数组
  9. rules: [
  10. { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入数字最多两位小数' }
  11. ],
  12. },
  13. ```

附上整个调用的所有代码

  • 1、template 模板代码
  1. <template>
  2. <div>
  3. <sl-table
  4. :list="list"
  5. @handleSelectionChange="handleSelectionChange"
  6. :columns="columns"
  7. :operates="operates"
  8. v-model:pageModel="pageModel"
  9. @search="search"
  10. >
  11. </sl-table>
  12. </div>
  13. </template>
  • 2、'script'标签代码
  1. import SlTable from '../../../common/components/table/index.vue'
  2. import { defineComponent, reactive, toRefs } from "vue";
  3. import { list_test, columns_test } from "./tableConfig";
  4. export default defineComponent({
  5. components: { SlTable },
  6. setup() {
  7. // 选中行
  8. const handleSelectionChange = (val) => {
  9. console.log("handleSelectionChange-val:", val);
  10. };
  11. // 编辑
  12. const handleDetail = (index, row, idx) => {
  13. console.log("index:", index, idx);
  14. console.log("row:", row);
  15. };
  16. // 删除
  17. const handleDel = (index, row) => {
  18. console.log(" index:", index);
  19. console.log(" row:", row);
  20. };
  21. const state = reactive({
  22. pageModel: {
  23. page: 1,
  24. limit: 10,
  25. total: 17
  26. },
  27. list: [], // table数据
  28. columns: [], // 需要展示的列
  29. operates: {
  30. width: 200,
  31. fixed: "right",
  32. list: [
  33. {
  34. id: "1",
  35. label: "查看",
  36. type: "text",
  37. show: true,
  38. disabled: false,
  39. method: (index, row, ss) => {
  40. handleDetail(index, row, ss);
  41. }
  42. },
  43. {
  44. id: "2",
  45. label: "删除",
  46. type: "text",
  47. show: true,
  48. disabled: false,
  49. method: (index, row) => {
  50. handleDel(index, row);
  51. }
  52. }
  53. ]
  54. } // 列操作按钮
  55. });
  56. state.list = list_test;
  57. state.columns = columns_test;
  58. const search = () => {
  59. state.list = [...state.list];
  60. console.log(state.pageModel, "state.pageModel");
  61. };
  62. return {
  63. ...toRefs(state),
  64. handleSelectionChange,
  65. search
  66. };
  67. }
  68. });
  • 3、其中模拟数据和字段配置在单独的文件中tableConfig
  1. const list_test =
  2. [
  3. {
  4. id: "24",
  5. title: "编号3",
  6. state: 0,
  7. createTime:"2021-09-23T17:57:09",
  8. remark: "自定义"
  9. },
  10. {
  11. id: "23",
  12. title: "编号4",
  13. state: 1,
  14. createTime:"2021-09-23T17:57:19",
  15. remark: "自定义"
  16. },
  17. {
  18. id: "23",
  19. title: "编号5",
  20. state: 2,
  21. createTime:"2021-09-23T17:57:29",
  22. remark: "自定义"
  23. },
  24. {
  25. id: "23",
  26. title: "编号5",
  27. state: 1,
  28. createTime:"2021-09-23T17:57:39",
  29. remark: "自定义111"
  30. },
  31. {
  32. id: "223",
  33. title: "编号3",
  34. state: 1,
  35. createTime:"2021-09-23T17:57:49",
  36. remark: "22222"
  37. },
  38. {
  39. id: "2444",
  40. title: "编号3",
  41. state: 0,
  42. createTime:"2021-09-23T17:57:59",
  43. remark: "333333"
  44. },
  45. {
  46. id: "24",
  47. title: "编号3",
  48. state: 0,
  49. createTime:"2021-09-23T17:57:09",
  50. remark: "自定义"
  51. },
  52. {
  53. id: "23",
  54. title: "编号4",
  55. state: 1,
  56. createTime:"2021-09-23T17:57:19",
  57. remark: "自定义"
  58. },
  59. {
  60. id: "23",
  61. title: "编号5",
  62. state: 2,
  63. createTime:"2021-09-23T17:57:29",
  64. remark: "自定义"
  65. },
  66. {
  67. id: "23",
  68. title: "编号5",
  69. state: 1,
  70. createTime:"2021-09-23T17:57:39",
  71. remark: "自定义111"
  72. },
  73. {
  74. id: "223",
  75. title: "编号3",
  76. state: 1,
  77. createTime:"2021-09-23T17:57:49",
  78. remark: "22222"
  79. },
  80. {
  81. id: "2444",
  82. title: "编号3",
  83. state: 0,
  84. createTime:"2021-09-23T17:57:59",
  85. remark: "333333"
  86. }
  87. ]
  88. const columns_test = [
  89. {
  90. type:'checkbox',
  91. },
  92. {
  93. prop: "id",
  94. label: "编号",
  95. type:'index',
  96. align: "center"
  97. },
  98. {
  99. prop: "title",
  100. label: "标题",
  101. align: "center",
  102. },
  103. {
  104. prop: "createTime",
  105. label: "创建时间",
  106. align: "center",
  107. dateFormat: "yyyy-MM-dd HH:mm:ss",
  108. sortable: true
  109. },
  110. {
  111. prop: "state",
  112. label: "状态",
  113. align: "center",
  114. dictionary: [
  115. { code: 0, name: "待审核"},
  116. { code: 1, name: "已审核"},
  117. { code: 2, name: "审核中"},
  118. ]
  119. },
  120. {
  121. prop:"custom",
  122. label:"自定义",
  123. align: "center",
  124. html: (row, column) => {
  125. return row.title==="编号3" ? `<span style="color: red;">${ row.remark }</span>`:`未定义`
  126. }
  127. }
  128. ]
  129. export {
  130. list_test,
  131. columns_test
  132. }

最后的最后

https://github.com/aehyok/vue-qiankun

本文中不涉及到代码,有关代码问题可以访问文章开头的微前端github demo 仓库,github仓库将会保持持续更新,不断优化小demo。

https://github.com/aehyok/2021

最后自己每天工作中的笔记记录仓库,主要以文章链接和问题处理方案为主。

vue3 element-plus 配置json快速生成form表单组件,提升生产力近600%(已在公司使用,持续优化中)的更多相关文章

  1. 结合Bootbox将后台JSON数据填充Form表单

    本文介绍了如何结合Bootbox将后台JSON数据填充到Form表单中,同时也介绍了一些需要使用的知识的学习途径,并附上了参考文档地址与学习网址,对此感兴趣的伙伴可以直接访问学习.为了方便介绍,使用了 ...

  2. jquery下的提交,点击按钮没反应,post方法不执行 JSON方式在FORM表单下不起作用

    jquery下的提交,点击按钮没反应,post方法不执行 JSON方式在FORM表单下不起作用

  3. 封装Vue Element的form表单组件

    前两天封装了一个基于vue和Element的table表格组件,阅读的人还是很多的,看来大家都是很认同组件化.高复用这种开发模式的,毕竟开发效率高,代码优雅,逼格高嘛.虽然这两天我的心情很糟糕,就像& ...

  4. Form( 表单) 组件

    本节课重点了解 EasyUI 中 Form(表单)组件的使用方法, 这个组件不依赖于任何组件.一. 加载方式表单组件只能在 JS 区域设置,首先定义一张表单.<form id="box ...

  5. 第二百二十一节,jQuery EasyUI,Form(表单)组件

    jQuery EasyUI,Form(表单)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Form(表单)组件的使用方法,这个组件不依赖于 ...

  6. Django form表单 组件

    目录 Django form表单 组件 Form 组件介绍 普通方式手写注册功能 使用form组件实现注册功能 Form 常用字段与插件 常用字段(必备) 字段参数(必备) 内置验证(必备) 自定义效 ...

  7. Vue + Element-ui实现后台管理系统(5)---封装一个Form表单组件和Table表格组件

    封装一个Form表单组件和Table组件 有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-syste ...

  8. 封装react antd的form表单组件

    form表单在我们日常的开发过程中被使用到的概率还是很大的,比如包含了登录.注册.修改个人信息.新增修改业务数据等的公司内部管理系统.而在使用时这些表单的样式如高度.上下边距.边框.圆角.阴影.高亮等 ...

  9. vue3 element-plus 配置json快速生成table列表组件,提升生产力近500%(已在公司使用,持续优化中)

    ️本文为博客园首发文章,未获授权禁止转载 大家好,我是aehyok,一个住在深圳城市的佛系码农‍♀️,如果你喜欢我的文章,可以通过点赞帮我聚集灵力️. 个人github仓库地址: https:gith ...

随机推荐

  1. Linux常用命令(二)之权限管理、文件搜索、帮助、压缩命令及管道

    在(一)中提到过rwx的含义,但是我们还需深入理解,明白其真正的含义和权限,对于文件和目录,rwx权限是不同的,尤其是目录的权限往往是被忽略的: 对于目录,其权限和对应的操作: r-ls w-touc ...

  2. pip 源的问题

    pip install -i https://pypi.doubanio.com/simple/ --trusted-host pypi.douban.com some-package

  3. Spring依赖注入的四种方式

    首先,我们需要定义一个Bean的class类: package framework.spring; import org.springframework.beans.BeansException; i ...

  4. 【第十八篇】- Maven Eclipse之Spring Cloud直播商城 b2b2c电子商务技术总结

    Maven Eclipse Eclipse 提供了一个很好的插件 m2eclipse ,该插件能将 Maven 和 Eclipse 集成在一起. 在最新的 Eclipse 中自带了 Maven,我们打 ...

  5. sed 找出含有某个字符串的行 注释掉

    1.源文件例子 [root@node1 ~]# cat /etc/fstab # # /etc/fstab # Created by anaconda on Mon Mar 1 18:32:15 20 ...

  6. Linux安装Cockpit监控服务

    CentOS/RHEL 8的新特性之一就是自带了一个cockpit的监控服务.通过c/s架构模式运行,客户端输入ip:端口即可访问 这类似于glances监控. 如果你不是使用的centos/rhel ...

  7. 反转链表middle

    eg: 输入:head = [1,2,3,4,5], left = 2, right = 4 输出:[1,4,3,2,5]相关解法:图解: /** * Definition for singly-li ...

  8. Mysql将其他表中的数据更新到指定表中

    update tb  set tb.字段= (select 字段 from tb1 where tb.字段1 = tb1.字段1); update role set uid = (select ID ...

  9. Django边学边记—模板

    功能 产生html,且不仅仅是一个html 包含: 静态内容:html,css,js 动态内容:模板语言 使用 一般使用 Django中提供的简写函数render调用模板 render(request ...

  10. python学习笔记(九)-函数2

    交换两个变量的值 a = 2 b = 1 b = 1 a = 2 #方式一: b,a = a,b #交换两个变量的值 print(a,b) #方式二: a = a + b #3 b = a - b # ...