https://github.com/xiaofengz/element-json-scheme-component
json scheme Form && Table && pagination, based on element-ui
https://github.com/xiaofengz/element-json-scheme-component
element element-ui form json-schema json-schema-form table vue
Last synced: 2 months ago
JSON representation
json scheme Form && Table && pagination, based on element-ui
- Host: GitHub
- URL: https://github.com/xiaofengz/element-json-scheme-component
- Owner: xiaofengz
- Created: 2020-01-17T05:55:24.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T05:20:39.000Z (about 3 years ago)
- Last Synced: 2025-11-02T08:03:16.680Z (2 months ago)
- Topics: element, element-ui, form, json-schema, json-schema-form, table, vue
- Language: JavaScript
- Homepage: https://xiaofengz.github.io/element-json-scheme-component/
- Size: 23.6 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 37
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## json scheme Form && Table, based on element-ui
[](https://www.npmjs.com/package/element-json-scheme-component)
> 完全根据json scheme生成element ui的form组件和table组件，同时也支持自定义slot.
## Live Preview 在线demo，在线编辑json
A [live Preview](https://xiaofengz.github.io/element-json-scheme-form/) is hosted on gh-pages.
## Install
```bash
npm i element-json-scheme-component
```
## Registry
```javascript
import ElJsonSchemaComponent from 'element-json-scheme-component';
const { ElJsonForm, ElJsonTable } = ElJsonSchemaComponent
Vue.use(ElJsonForm);
Vue.use(ElJsonTable);
```
### 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)
- 必须手动绑定 :model="xxx", 在data里设置为xxx:{}即可，需初始化，否则elementUi会报错
#### 基本用法：
```javascript
提交
data() {
return {
formModel: {},
formJson: {
"formAttr": {
"inline": true,
"label-position": "right",
},
"properties": {
"name": {
"type": "input",
"label": "活动名称",
"placeholder": "请输入...",
},
"search": {
"type": "autocomplete",
"label": "远程搜索",
"placeholder": "请搜索...",
}
},
}
}
},
mothods: {
onSubmit() {
// 调用form实例的方法demo
// this.$refs.form.resetFields();
this.$refs.form.validate((valid, err) => {
if (valid) {
// 打印form的values
console.log('submit!', this.$refs.form, this.$refs.form.values);
alert('submit!');
} else {
console.log('error submit!!', err);
return false;
}
});
}
}
```
#### 提供类antd form的部分api
```javascript
// 表单校验 方式一
const values = await this.$refs.form.validateFields();
// 方式二
this.$refs.form.validateFields().then((values) => {
}).catch((e) => {})
// 方式三
this.$refs.form.validate(async (valid, err) => {
if (valid) {
} else {
console.log(err)
}
}
```
```javascript
// 设置表单项的值
this.$refs.form.setFieldValue('formItemKey', value)
// 批量设置
this.$refs.form.setFieldsValue({
'formItemKey1', value1,
'formItemKey2', value2,
})
```
```javascript
// 获取表单项的值
const values = this.$refs.form.getFieldsValue()
```
### 如果select组件的options数据需后端获取，在mounted手动修改this.formJson即可，写法如下
```javascript
mounted() {
// 如果options是后端数据的demo, 手动修改this.formJson即可
new Promise((resolve) => {
setTimeout(() => {
this.formJson.properties.sex.options = [{
"label": "男1111",
"value": 1
},
{
"label": "女",
"value": 2
},
]
}, 1000)
})
},
```
### 表单项联动，或设置默认值，使用setFieldValue() 写法如下
```javascript
mounted() {
// 根据后端返回详情数据设置默认值
new Promise((resolve) => {
setTimeout(() => {
this.$refs.form.setFieldValue('key', value)
}, 1000)
})
},
```
### 如果input组件为异步搜索，写法如下
```javascript
mounted() {
// 异步搜索demo
this.formJson.properties.search.fetchSuggestions = (queryString, cb) => this.fetch(queryString, cb)
},
methods: {
fetch(queryString, cb) {
if (this.timer) clearTimeout(this.timer)
this.timer = setTimeout(() => {
cb([{
"label": "结果1",
"value": "结果1"
}])
}, 3000 * Math.random())
}
}
```
#### 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)
基本用法：
```javascript
data() {
return {
tableJson: {
"columns": [{
type: 'selection',
width: 55
}, {
prop: 'name',
label: 'Name',
width: 80
}, {
prop: 'operate',
label: '操作',
width: 180
}
]
},
tableData: [{
name: 'Sam'
}
],
}
},
methods: {
select(val) {
console.log('select', val)
}
}
```
#### 自定义table-column
> 指定v-slot:xxx="scope"即可
```javascript
{{scope.row.name + '自定义row'}}
{{scope.row.name + '自定义row'}}
{{scope.row.sex === 1 ? '男' : '女'}}
{{'操作1'}}
{{'操作2'}}
```
### 完整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)
> 完整页面包含form && table && 分页