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>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
@@ -9,20 +15,55 @@ export default {
|
||||
name: 'App',
|
||||
data() {
|
||||
return {
|
||||
tree:{
|
||||
tree:
|
||||
{
|
||||
root: {
|
||||
type: "object",
|
||||
title: "title",
|
||||
properties: {
|
||||
field_1: {
|
||||
type: "string"
|
||||
},
|
||||
},
|
||||
required: ["field_1"]
|
||||
type: "object"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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>
|
||||
<div class="form-recursion">
|
||||
<div class="json-schema-editor">
|
||||
<a-row class="row" :gutter="10">
|
||||
<a-col :span="8" class="ant-col-name">
|
||||
<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>
|
||||
<a-input :disabled="disabled" :value="pickKey" class="ant-col-name-input" @input="onInputName"/>
|
||||
</div>
|
||||
<a-checkbox v-if="root" :disabled="!isObject && !isArray" class="ant-col-name-required" @change="onRootCheck"/>
|
||||
<a-checkbox v-else :disabled="isItem" :checked="checked" class="ant-col-name-required" @change="onCheck"/>
|
||||
<a-tooltip v-if="root">
|
||||
<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 :span="4">
|
||||
<a-select v-model="pickValue.type" class="ant-col-type" @change="onChangeType">
|
||||
@@ -111,13 +117,9 @@ export default {
|
||||
countAdd: 1
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
console.info(this.value)
|
||||
},
|
||||
methods: {
|
||||
onInputName(event){
|
||||
onInputName(){
|
||||
clearAttr(this.value)
|
||||
console.info(event)
|
||||
},
|
||||
onInputTitle(event){
|
||||
this.title = event.target.value
|
||||
@@ -137,10 +139,11 @@ export default {
|
||||
this._deepCheck(checked,this.pickValue)
|
||||
},
|
||||
_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')
|
||||
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')
|
||||
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)
|
||||
pos >=0 && required.splice(pos,1)
|
||||
}
|
||||
required.length === 0 && this.$delete(parent,'required')
|
||||
},
|
||||
addChild(){
|
||||
const name = this._joinName()
|
||||
@@ -164,11 +168,9 @@ export default {
|
||||
node.properties || this.$set(node,'properties',{})
|
||||
const props = node.properties
|
||||
this.$set(props,name,{type: type})
|
||||
console.info(this.value)
|
||||
},
|
||||
removeNode(){
|
||||
const { properties,required } = this.parent
|
||||
console.info(properties,required)
|
||||
this.$delete(properties,this.pickKey)
|
||||
if(required){
|
||||
const pos = required.indexOf(this.pickKey)
|
||||
@@ -183,8 +185,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.form-recursion{
|
||||
width:100%;
|
||||
.json-schema-editor{
|
||||
.row{
|
||||
display: flex;
|
||||
margin:12px;
|
||||
|
||||
Reference in New Issue
Block a user