{"id":32904816,"url":"https://github.com/xiaofengz/element-json-scheme-component","last_synced_at":"2025-11-10T14:06:22.315Z","repository":{"id":38102316,"uuid":"234480819","full_name":"xiaofengz/element-json-scheme-component","owner":"xiaofengz","description":"json scheme Form \u0026\u0026 Table \u0026\u0026 pagination, based on element-ui  ","archived":false,"fork":false,"pushed_at":"2023-01-05T05:20:39.000Z","size":24723,"stargazers_count":3,"open_issues_count":37,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-11-02T08:03:16.680Z","etag":null,"topics":["element","element-ui","form","json-schema","json-schema-form","table","vue"],"latest_commit_sha":null,"homepage":"https://xiaofengz.github.io/element-json-scheme-component/","language":"JavaScript","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/xiaofengz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-17T05:55:24.000Z","updated_at":"2022-05-06T08:55:29.000Z","dependencies_parsed_at":"2023-02-03T13:15:48.823Z","dependency_job_id":null,"html_url":"https://github.com/xiaofengz/element-json-scheme-component","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/xiaofengz/element-json-scheme-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaofengz%2Felement-json-scheme-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaofengz%2Felement-json-scheme-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaofengz%2Felement-json-scheme-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaofengz%2Felement-json-scheme-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xiaofengz","download_url":"https://codeload.github.com/xiaofengz/element-json-scheme-component/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaofengz%2Felement-json-scheme-component/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":282986407,"owners_count":26760033,"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","status":"online","status_checked_at":"2025-11-06T02:00:06.180Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["element","element-ui","form","json-schema","json-schema-form","table","vue"],"created_at":"2025-11-10T14:02:26.350Z","updated_at":"2025-11-10T14:06:22.304Z","avatar_url":"https://github.com/xiaofengz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## json scheme Form \u0026\u0026 Table, based on element-ui\n\n[![NPM version](https://img.shields.io/badge/npm-v1.0.7-brightgreen)](https://www.npmjs.com/package/element-json-scheme-component)\n\n\u003e 完全根据json scheme生成element ui的form组件和table组件，同时也支持自定义slot.\n\n![](https://github.com/xiaofengz/element-json-schema-form/blob/master/gif/form11.gif)\n## Live Preview 在线demo，在线编辑json\nA [live Preview](https://xiaofengz.github.io/element-json-scheme-form/) is hosted on gh-pages.\n\n## Install\n\n```bash\nnpm i element-json-scheme-component\n```\n\n## Registry\n\n```javascript\nimport ElJsonSchemaComponent from 'element-json-scheme-component';\n\nconst { ElJsonForm, ElJsonTable } = ElJsonSchemaComponent\nVue.use(ElJsonForm);\nVue.use(ElJsonTable);\n```\n\n### Form组件的用法：el-json-form组件   [示例代码](https://github.com/xiaofengz/element-json-scheme-component/blob/master/src/examples/form_default.vue)  [在线demo](https://xiaofengz.github.io/element-json-scheme-component/#/form-default)\n- 必须手动绑定 :model=\"xxx\", 在data里设置为xxx:{}即可，需初始化，否则elementUi会报错\n\n#### 基本用法：\n```javascript\n\u003cel-json-form :config=\"formJson\" :model=\"formModel\" ref=\"form\" label-width=\"80px\"\u003e\n  \u003cdiv slot=\"append\" class=\"submit-item\"\u003e\n    \u003cel-button type=\"primary\" @click=\"onSubmit\"\u003e提交\u003c/el-button\u003e\n  \u003c/div\u003e\n\u003c/el-json-form\u003e\n\ndata() {\n    return {\n      formModel: {},\n      formJson: {\n        \"formAttr\": {\n          \"inline\": true,\n          \"label-position\": \"right\",\n        },\n        \"properties\": {\n          \"name\": {\n            \"type\": \"input\",\n            \"label\": \"活动名称\",\n            \"placeholder\": \"请输入...\",\n          },\n          \"search\": {\n            \"type\": \"autocomplete\",\n            \"label\": \"远程搜索\",\n            \"placeholder\": \"请搜索...\",\n          }\n        },\n      }\n    }\n},\nmothods: {\n  onSubmit() {\n      // 调用form实例的方法demo\n      // this.$refs.form.resetFields();\n      this.$refs.form.validate((valid, err) =\u003e {\n        if (valid) {\n          // 打印form的values\n          console.log('submit!', this.$refs.form, this.$refs.form.values);\n          alert('submit!');\n        } else {\n          console.log('error submit!!', err);\n          return false;\n        }\n      });\n    }\n}\n```\n\n#### 提供类antd form的部分api\n```javascript \n  // 表单校验 方式一\n  const values = await this.$refs.form.validateFields();\n\n  // 方式二\n  this.$refs.form.validateFields().then((values) =\u003e {\n\n  }).catch((e) =\u003e {})\n  \n  // 方式三\n  this.$refs.form.validate(async (valid, err) =\u003e {\n    if (valid) {\n    \n    } else {\n      console.log(err)\n    }\n  }\n```\n\n```javascript\n  // 设置表单项的值\n  this.$refs.form.setFieldValue('formItemKey', value)\n  // 批量设置\n  this.$refs.form.setFieldsValue({\n    'formItemKey1', value1,\n    'formItemKey2', value2,\n  })\n```\n\n```javascript\n  // 获取表单项的值\n  const values = this.$refs.form.getFieldsValue()\n```\n\n### 如果select组件的options数据需后端获取，在mounted手动修改this.formJson即可，写法如下\n```javascript\n  mounted() {\n    // 如果options是后端数据的demo, 手动修改this.formJson即可\n    new Promise((resolve) =\u003e {\n      setTimeout(() =\u003e {\n        this.formJson.properties.sex.options = [{\n            \"label\": \"男1111\",\n            \"value\": 1\n          },\n          {\n            \"label\": \"女\",\n            \"value\": 2\n          },\n        ]\n      }, 1000)\n    })\n  },\n```\n\n### 表单项联动，或设置默认值，使用setFieldValue() 写法如下\n```javascript\n  mounted() {\n    // 根据后端返回详情数据设置默认值\n    new Promise((resolve) =\u003e {\n      setTimeout(() =\u003e {\n        this.$refs.form.setFieldValue('key', value)\n      }, 1000)\n    })\n  },\n```\n\n### 如果input组件为异步搜索，写法如下\n```javascript\nmounted() {\n    // 异步搜索demo\n    this.formJson.properties.search.fetchSuggestions = (queryString, cb) =\u003e this.fetch(queryString, cb)\n},\nmethods: {\n    fetch(queryString, cb) {\n      if (this.timer) clearTimeout(this.timer)\n      this.timer = setTimeout(() =\u003e {\n        cb([{\n          \"label\": \"结果1\",\n          \"value\": \"结果1\"\n        }])\n      }, 3000 * Math.random())\n    }\n}\n```\n\n\n#### Table组件的用法：el-json-table组件 [示例代码](https://github.com/xiaofengz/element-json-scheme-component/blob/master/src/examples/table_default.vue)  [在线demo](https://xiaofengz.github.io/element-json-scheme-component/#/table-default)\n\n基本用法：\n\n```javascript\n\u003cel-json-table \n    :config=\"tableJson\" \n    :data=\"tableData\" \n    @select=\"select\" \u003e\n\u003c/el-json-table\u003e\n\ndata() {\n    return {\n      tableJson: {\n        \"columns\": [{\n            type: 'selection',\n            width: 55\n          }, {\n            prop: 'name',\n            label: 'Name',\n            width: 80\n          }, {\n            prop: 'operate',\n            label: '操作',\n            width: 180\n          }\n        ]\n      },\n      tableData: [{\n          name: 'Sam'\n        }\n      ],\n    }\n},\nmethods: {\n  select(val) {\n    console.log('select', val)\n  }\n}\n```\n\n#### 自定义table-column\n\u003e 指定v-slot:xxx=\"scope\"即可\n\n```javascript\n\u003cel-json-table \n  :config=\"tableJson\" \n  :data=\"tableData\" \n  @select-all=\"selectAll\" \u003e\n    \u003c!--如果要自定义table-column, 只要指定v-slot:名字, 然后像以前一样写就可以了--\u003e\n    \u003ctemplate v-slot:name=\"scope\"\u003e\n      \u003cel-button type=\"text\" @click=\"openModel(scope.row)\"\u003e{{scope.row.name + '自定义row'}}\n      \u003c/el-button\u003e\n    \u003c/template\u003e\n    \n    \u003c!-- vue3以上才支持v-slot，3.0以下可以这样写 --\u003e\n    \u003ctemplate slot=\"name\" slot-scope=\"scope\"  \u003e\n        \u003cel-button type=\"text\" @click=\"openModel(scope.row)\"\u003e{{scope.row.name + '自定义row'}}\n        \u003c/el-button\u003e\n    \u003c/template\u003e\n    \n    \u003ctemplate v-slot:sex=\"scope\"\u003e\n      \u003cspan\u003e{{scope.row.sex === 1 ? '男' : '女'}}\u003c/span\u003e\n    \u003c/template\u003e\n\n    \u003ctemplate v-slot:operate=\"scope\"\u003e\n      \u003cel-button type=\"text\" @click=\"openModel(scope.row)\"\u003e\n        {{'操作1'}}\u003c/el-button\u003e\n      \u003cel-button type=\"text\" @click=\"openModel(scope.row)\"\u003e{{'操作2'}}\u003c/el-button\u003e\n    \u003c/template\u003e\n\u003c/el-json-table\u003e\n```\n\n### 完整demo代码: [示例代码](https://github.com/xiaofengz/element-json-scheme-component/blob/master/src/examples/complete_demo.vue)  [在线demo](https://xiaofengz.github.io/element-json-scheme-component/#/table-default)\n\n\u003e 完整页面包含form \u0026\u0026 table \u0026\u0026 分页\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaofengz%2Felement-json-scheme-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxiaofengz%2Felement-json-scheme-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaofengz%2Felement-json-scheme-component/lists"}