mirror of
https://github.com/Ssl1S/json-schema-editor-vue.git
synced 2025-12-30 01:37:55 +08:00
修复数组报错的问题
This commit is contained in:
@@ -1,6 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<json-schema-editor :disabled="true" :value="tree" :root="true" style="width:600px"/>
|
<div class="title">
|
||||||
|
Demo
|
||||||
|
</div>
|
||||||
|
<div class="container">
|
||||||
|
<pre>{{tree}}</pre>
|
||||||
|
<json-schema-editor class="schema" :disabled="true" :value="tree" :root="true"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -9,20 +15,55 @@ export default {
|
|||||||
name: 'App',
|
name: 'App',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
tree:{
|
tree:
|
||||||
|
{
|
||||||
root: {
|
root: {
|
||||||
type: "object",
|
type: "object"
|
||||||
title: "title",
|
|
||||||
properties: {
|
|
||||||
field_1: {
|
|
||||||
type: "string"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
required: ["field_1"]
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
<style>
|
||||||
|
*{
|
||||||
|
padding:0;
|
||||||
|
margin:0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
text-align: center;
|
||||||
|
font-size: 40px;
|
||||||
|
font-weight: bold;
|
||||||
|
height:100px;
|
||||||
|
line-height: 100px;
|
||||||
|
}
|
||||||
|
.container{
|
||||||
|
display: flex;
|
||||||
|
padding:20px;
|
||||||
|
width:80vw;
|
||||||
|
min-width:800px;
|
||||||
|
justify-content:center;
|
||||||
|
height: calc(100vh - 100px);
|
||||||
|
margin:auto;
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
font-family: monospace;
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
border:1px solid rgba(0,0,0,.1);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 12px;
|
||||||
|
width:50%
|
||||||
|
}
|
||||||
|
.schema{
|
||||||
|
margin-left: 20px;
|
||||||
|
width:50%;
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x:hidden;
|
||||||
|
border:1px solid rgba(0,0,0,.1);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="form-recursion">
|
<div class="json-schema-editor">
|
||||||
<a-row class="row" :gutter="10">
|
<a-row class="row" :gutter="10">
|
||||||
<a-col :span="8" class="ant-col-name">
|
<a-col :span="8" class="ant-col-name">
|
||||||
<div :style="{marginLeft:`${20*deep}px`}" class="ant-col-name-c">
|
<div :style="{marginLeft:`${20*deep}px`}" class="ant-col-name-c">
|
||||||
@@ -7,8 +7,14 @@
|
|||||||
<span v-else style="width:32px;display:inline-block"></span>
|
<span v-else style="width:32px;display:inline-block"></span>
|
||||||
<a-input :disabled="disabled" :value="pickKey" class="ant-col-name-input" @input="onInputName"/>
|
<a-input :disabled="disabled" :value="pickKey" class="ant-col-name-input" @input="onInputName"/>
|
||||||
</div>
|
</div>
|
||||||
<a-checkbox v-if="root" :disabled="!isObject && !isArray" class="ant-col-name-required" @change="onRootCheck"/>
|
<a-tooltip v-if="root">
|
||||||
<a-checkbox v-else :disabled="isItem" :checked="checked" class="ant-col-name-required" @change="onCheck"/>
|
<span slot="title">全选</span>
|
||||||
|
<a-checkbox :disabled="!isObject && !isArray" class="ant-col-name-required" @change="onRootCheck"/>
|
||||||
|
</a-tooltip>
|
||||||
|
<a-tooltip v-else>
|
||||||
|
<span slot="title">是否必填</span>
|
||||||
|
<a-checkbox :disabled="isItem" :checked="checked" class="ant-col-name-required" @change="onCheck"/>
|
||||||
|
</a-tooltip>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="4">
|
<a-col :span="4">
|
||||||
<a-select v-model="pickValue.type" class="ant-col-type" @change="onChangeType">
|
<a-select v-model="pickValue.type" class="ant-col-type" @change="onChangeType">
|
||||||
@@ -111,13 +117,9 @@ export default {
|
|||||||
countAdd: 1
|
countAdd: 1
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted(){
|
|
||||||
console.info(this.value)
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
onInputName(event){
|
onInputName(){
|
||||||
clearAttr(this.value)
|
clearAttr(this.value)
|
||||||
console.info(event)
|
|
||||||
},
|
},
|
||||||
onInputTitle(event){
|
onInputTitle(event){
|
||||||
this.title = event.target.value
|
this.title = event.target.value
|
||||||
@@ -137,10 +139,11 @@ export default {
|
|||||||
this._deepCheck(checked,this.pickValue)
|
this._deepCheck(checked,this.pickValue)
|
||||||
},
|
},
|
||||||
_deepCheck(checked,node){
|
_deepCheck(checked,node){
|
||||||
if(node.type === 'object'){
|
if(node.type === 'object' && node.properties){
|
||||||
checked ? this.$set(node,'required',Object.keys(node.properties)) : this.$delete(node,'required')
|
checked ? this.$set(node,'required',Object.keys(node.properties)) : this.$delete(node,'required')
|
||||||
Object.keys(node.properties).forEach(key => this._deepCheck(checked,node.properties[key]))
|
Object.keys(node.properties).forEach(key => this._deepCheck(checked,node.properties[key]))
|
||||||
} else if(node.type === 'array'){
|
} else if(node.type === 'array' && node.items.type === 'object'){
|
||||||
|
console.info("t1",node)
|
||||||
checked ? this.$set(node.items,'required',Object.keys(node.items.properties)) : this.$delete(node.items,'required')
|
checked ? this.$set(node.items,'required',Object.keys(node.items.properties)) : this.$delete(node.items,'required')
|
||||||
Object.keys(node.items.properties).forEach(key => this._deepCheck(checked,node.items.properties[key]))
|
Object.keys(node.items.properties).forEach(key => this._deepCheck(checked,node.items.properties[key]))
|
||||||
}
|
}
|
||||||
@@ -156,6 +159,7 @@ export default {
|
|||||||
const pos = required.indexOf(this.pickKey)
|
const pos = required.indexOf(this.pickKey)
|
||||||
pos >=0 && required.splice(pos,1)
|
pos >=0 && required.splice(pos,1)
|
||||||
}
|
}
|
||||||
|
required.length === 0 && this.$delete(parent,'required')
|
||||||
},
|
},
|
||||||
addChild(){
|
addChild(){
|
||||||
const name = this._joinName()
|
const name = this._joinName()
|
||||||
@@ -164,11 +168,9 @@ export default {
|
|||||||
node.properties || this.$set(node,'properties',{})
|
node.properties || this.$set(node,'properties',{})
|
||||||
const props = node.properties
|
const props = node.properties
|
||||||
this.$set(props,name,{type: type})
|
this.$set(props,name,{type: type})
|
||||||
console.info(this.value)
|
|
||||||
},
|
},
|
||||||
removeNode(){
|
removeNode(){
|
||||||
const { properties,required } = this.parent
|
const { properties,required } = this.parent
|
||||||
console.info(properties,required)
|
|
||||||
this.$delete(properties,this.pickKey)
|
this.$delete(properties,this.pickKey)
|
||||||
if(required){
|
if(required){
|
||||||
const pos = required.indexOf(this.pickKey)
|
const pos = required.indexOf(this.pickKey)
|
||||||
@@ -183,8 +185,7 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.form-recursion{
|
.json-schema-editor{
|
||||||
width:100%;
|
|
||||||
.row{
|
.row{
|
||||||
display: flex;
|
display: flex;
|
||||||
margin:12px;
|
margin:12px;
|
||||||
|
|||||||
Reference in New Issue
Block a user