{"id":20618294,"url":"https://github.com/jackysoft/rocket-render","last_synced_at":"2025-04-15T11:39:24.882Z","repository":{"id":38620904,"uuid":"407806038","full_name":"JackySoft/rocket-render","owner":"JackySoft","description":"一款基于Vue2.x版本开发的低代码组件，可快速生成表单和表格","archived":false,"fork":false,"pushed_at":"2023-10-24T14:28:53.000Z","size":3473,"stargazers_count":83,"open_issues_count":0,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-27T00:42:37.570Z","etag":null,"topics":["render","rocket-render","vue"],"latest_commit_sha":null,"homepage":"https://jackysoft.github.io/rocket-render-doc","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JackySoft.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-09-18T08:44:41.000Z","updated_at":"2024-02-06T07:48:13.000Z","dependencies_parsed_at":"2024-11-20T11:01:47.656Z","dependency_job_id":null,"html_url":"https://github.com/JackySoft/rocket-render","commit_stats":null,"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JackySoft%2Frocket-render","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JackySoft%2Frocket-render/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JackySoft%2Frocket-render/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JackySoft%2Frocket-render/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JackySoft","download_url":"https://codeload.github.com/JackySoft/rocket-render/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249062293,"owners_count":21206657,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["render","rocket-render","vue"],"created_at":"2024-11-16T12:07:51.032Z","updated_at":"2025-04-15T11:39:24.862Z","avatar_url":"https://github.com/JackySoft.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"## rocket-render\n\n一款基于 Vue2.6 实现的表单、表格低代码插件，支持查询表单、表单联动、表单显隐、表单异步赋值，动态表格能各项能力。组件文档可能更新不及时，大家可以查看 [Release 文档](https://jackysoft.github.io/rocket-render-doc/Release.html)。\n\n## Document\n\n- 体验 DEMO：https://jackysoft.github.io/rocket-render/\n\n- 开发文档：https://jackysoft.github.io/rocket-render-doc\n\n- Release： [Release 文档](https://jackysoft.github.io/rocket-render-doc/Release.html)。\n\n## Features\n\n- 基于 json 配置化开发表单、表格组件\n- 基于 ElementUI 二次封装，无缝对接，属性、事件均和 ElementUI 同步\n- rocket-render 更加易用、快速开发\n\n## Install\n\n1. 安装 rocket-render\n\n```\nyarn add rocket-render -S\n\n# or\n\nnpm i rocket-render -S\n```\n\n2. rocket-render 依赖 ElementUI，所以需要安装 ElementUI\n\n```\nyarn add element-ui -S\n```\n\n3. 本案例需要使用 axios 发送请求，所以也需要安装 axios（插件本身不需要 axios）\n\n```\nyarn add axios -S\n```\n\n## Usage\n\n1. main.js 中全局安装插件\n\n```js\nimport Vue from 'vue';\nimport Element from 'element-ui';\nimport 'element-ui/lib/theme-chalk/index.css';\n\nimport RocketRender from 'rocket-render';\nimport 'rocket-render/lib/rocket-render.css';\n\nVue.use(Element);\n\n// 可根据公司业务做全局定制\nVue.use(RocketRender, {\n  size: 'small', // form/table全局尺寸: medium / small / mini\n  empty: '-', // table列中字段为空时，默认显示内容\n  inline: 'flex', // 搜索表单全局配置，默认：flex\n  toolbar: true, // 是否展示工具条，默认：true\n  align: 'center', // 表格列对齐方式，默认：center\n  border: true, // 表格是否显示边框，默认：true\n  pager: true, // 是否显示分页器，默认：true\n  pageSize: 20, // 全局每页条数，默认：20\n  emptyText: '暂无数据', // 表格无数据时展示内容，默认：暂无数据\n});\n```\n\n2. 页面使用组件\n\n```html\n\u003ctemplate\u003e\n  \u003c!-- style 不是必须的，此处为了好看，添加一个默认背景 --\u003e\n  \u003cdiv style=\"background-color: #f1f1f1;padding: 20px;\"\u003e\n    \u003c!-- 搜索表单，自带样式，可以自定义进行覆盖，model最好添加sync来同步语法糖 --\u003e\n    \u003csearch-form\n      :json=\"form\"\n      :model.sync=\"queryForm\"\n      @handleQuery=\"getTableList\"\n    /\u003e\n    \u003c!-- 列表区域，支撑各种场景的列显示以及自定义列，注意json要添加.sync用来同步对象 --\u003e\n    \u003crocket-table\n      :json.sync=\"tableJson\"\n      @handleChange=\"getTableList\"\n      style=\"margin-top: 20px;padding: 20px;\"\n    /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import axios from 'axios';\n  export default {\n    name: 'index',\n    data() {\n      return {\n        // 表单model对象，用于初始化值和获取表单值\n        queryForm: {\n          user_name: 'jack',\n          user_status: [1, 2],\n          register_date: '2020-11-20',\n          login_time: ['2020-11-01', '2020-11-20'],\n          time_part_start: '03:00',\n          time_part_end: '05:00',\n          match: 1,\n          province: ['Hubei', 'Wuhan'],\n          use_status: 1,\n          query_field: 1,\n        },\n        // 动态生成查询表单\n        form: [\n          {\n            type: 'text',\n            model: 'user_name',\n            label: '用户',\n            placeholder: '请输入用户名称',\n            /**\n             * 所有组件都包含change事件，用于处理自定义业务\n             * val: 当前字段值\n             * values：当前表单值\n             * model: 当前字段\n             */\n            change(val, values, model) {\n              // 可获取所有值，也可直接重置修改其它字段\n              values.use_status = 2;\n            },\n            /**\n             * 用来做显隐，判断当前字段是否需要展示\n             * 支持函数和对象两种写法\n             * 注意：show只能用在rocket-form中，search-form暂时未支持。\n             */\n            show(values) {\n              return [1, 3, 4].includes(values.user_type);\n            },\n            // 方式二：\n            show: {\n              // 当user_type为 1/3/4 其中一个时显示\n              model: 'user_type',\n              val: [1, 3, 4],\n            },\n            prepend: 'https://',\n            append: '.com',\n          },\n          {\n            type: 'radio',\n            label: '使用状态',\n            placeholder: '请选择使用状态',\n            model: 'use_status',\n            options: [\n              { label: '在线', value: 1 },\n              { label: '离线', value: 2 },\n            ],\n          },\n          {\n            type: 'select',\n            model: 'user_status',\n            label: '用户状态',\n            multiple: true, // 支持多选\n            filterable: true, // 支持输入过滤\n            change: this.getSelectList, // 自定义事件，回调接口\n            width: '260px',\n            options: [\n              { label: '全部', value: 0 },\n              { label: '已注销', value: 1 },\n              { label: '老用户', value: 2 },\n              { label: '新用户', value: 3 },\n            ],\n          },\n          {\n            type: 'select',\n            model: 'user_list',\n            label: '用户列表',\n            options: [],\n            // 如果接口返回的不是label/value结构，可以使用field进行映射\n            field: {\n              label: 'name',\n              value: 'id',\n            },\n            // 异步获取下拉选项值\n            fetchOptions: async () =\u003e {\n              const res = await axios.get(\n                'https://www.fastmock.site/mock/f7b55d085be70bdf2bdd62fb3c65081a/api/userList',\n              );\n              return res.data;\n            },\n            // 或者在mounted中，通过this.form[1].options = [{label:1,value:1}] 动态赋值\n          },\n          {\n            type: 'date',\n            model: 'register_date',\n            label: '注册日期',\n            shortcuts: true,\n            width: '150px',\n            change(val, values) {\n              console.log(val, values);\n              values.user_name = 'tom';\n            },\n          },\n          {\n            type: 'daterange',\n            model: 'login_time',\n            label: '日期范围',\n            width: '220px',\n            shortcuts: true,\n            // 一般接口需要拆分成两个字段，可以使用export进行拆解，非常实用。\n            export: ['startTime', 'endTime'],\n          },\n          {\n            type: 'time-select',\n            label: '注册时段',\n            model: 'time_part_start',\n            change: this.handleTime,\n            pickerOptions: {\n              start: '00:00',\n              step: '01:00',\n              end: '23:00',\n            },\n          },\n          {\n            type: 'time-select',\n            label: '-',\n            model: 'time_part_end',\n            pickerOptions: {\n              start: '00:00',\n              step: '01:00',\n              end: '23:00',\n            },\n          },\n          {\n            type: 'cascader',\n            model: 'province',\n            label: '省份',\n            props: {\n              multiple: true, // 支持多选\n            },\n            options: [\n              {\n                value: 'Hubei',\n                label: '湖北',\n                children: [\n                  {\n                    value: 'Wuhan',\n                    label: '武汉',\n                    disabled: true, // 支持单项禁用\n                  },\n                  {\n                    value: 'Xiangyang',\n                    label: '襄阳',\n                  },\n                ],\n              },\n              {\n                value: 'Beijing',\n                label: '北京',\n                children: [\n                  {\n                    value: 'Haidian',\n                    label: '海淀区',\n                  },\n                  {\n                    value: 'ChaoYang',\n                    label: '朝阳',\n                  },\n                ],\n              },\n            ],\n          },\n          {\n            type: 'checkbox',\n            model: 'match',\n            label: '是否匹配',\n            trueLabel: 1,\n            falseLabel: 0,\n          },\n          {\n            type: 'switch',\n            model: 'isCheck',\n            label: '是否校验',\n          },\n        ],\n        tableJson: {\n          title: '用户列表',\n          actionList: [{ text: '新增' }],\n          // 表格列头\n          columns: [\n            {\n              prop: 'selection',\n              type: 'selection',\n              label: '选框',\n            },\n            {\n              prop: 'index',\n              type: 'index',\n              label: '序号',\n            },\n            {\n              prop: 'uid',\n              label: '用户ID',\n              align: 'left',\n            },\n            {\n              prop: 'cname',\n              label: '用户名称',\n              align: 'left',\n            },\n            {\n              prop: 'user_img',\n              label: '头像',\n              width: 240,\n              type: 'image',\n              image: {\n                type: 'single',\n              },\n            },\n            {\n              prop: 'use_status',\n              label: '当前状态',\n              formatter(row) {\n                return {\n                  1: '在线',\n                  2: '离线',\n                }[row.use_status];\n              },\n            },\n            {\n              prop: 'user_email',\n              label: '邮箱',\n            },\n            {\n              prop: 'user_status_name',\n              label: '用户状态',\n            },\n            {\n              prop: 'intrest_name',\n              label: '兴趣',\n              width: 70,\n            },\n            {\n              prop: 'register_date',\n              label: '注册时间',\n            },\n            {\n              type: 'action',\n              list: [\n                // 第一种：常规用法，通过text显示按钮名称\n                {\n                  text: '编辑',\n                  // 默认显示，可不填，一般我们通过permission来做按钮权限，控制显示和隐藏\n                  permission: true,\n                },\n                //支持style/class等相关属性，所有el-button支持的属性，都可以添加\n                {\n                  text: '删除',\n                  permission: true,\n                  style: { color: 'red' },\n                  class: 'txt',\n                },\n                // 第二种：支持根据返回值动态显示不同按钮名称\n                {\n                  prop: 'status', //显示的按钮需要根据此状态动态控制\n                  val: {\n                    2: '启用', // status为2，显示启用\n                    1: {\n                      // status为1，显示禁用，同时设置按钮颜色\n                      text: '禁用',\n                      disabled: true, //按钮禁用\n                    },\n                  },\n                  permission: true, //权限控制，根据后台返回动态设置\n                },\n                // 第三种：直接使用函数编程，推荐使用编程\n                {\n                  text: '添加',\n                  permission: ({ status }) =\u003e {\n                    return status == 1;\n                  },\n                },\n              ],\n            },\n          ],\n          data: [],\n          // 分页对象，此结构目前固定\n          pagination: {\n            pageNum: 1,\n            pageSize: 20,\n            total: 0,\n          },\n        },\n      };\n    },\n    mounted() {\n      this.getTableList();\n    },\n    methods: {\n      // 首页列表查询,page为子组件传递的页码，默认为1\n      async getTableList(page = 1) {\n        this.tableJson.pagination.page = page;\n        const data = {\n          ...this.queryForm, // 查询表单数据\n          ...this.tableJson.pagination, // 默认分页数据\n        };\n        const res = await axios.get(\n          'https://www.fastmock.site/mock/f7b55d085be70bdf2bdd62fb3c65081a/api/basic/list',\n          data,\n        );\n        this.tableJson.data = res.data.list;\n        this.tableJson.pagination.total = res.data.total;\n      },\n      // 推荐使用fetchOptions方法来动态获取下拉值。\n      getSelectList(val, values, model) {\n        console.log(val, values, model);\n        axios\n          .get(\n            'https://www.fastmock.site/mock/f7b55d085be70bdf2bdd62fb3c65081a/api/userList',\n          )\n          .then((res) =\u003e {\n            // 动态设置options数组\n            this.form[3].options = res.data;\n          });\n      },\n      handleTime(val) {\n        this.form[7].pickerOptions.minTime = val;\n        // 或者通过$获取每个表单字段进行对象赋值\n        this.form.$time_part_start.pickerOptions.minTime = val;\n      },\n    },\n  };\n\u003c/script\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjackysoft%2Frocket-render","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjackysoft%2Frocket-render","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjackysoft%2Frocket-render/lists"}