The requirements are as follows: Manually add to generate JSON data, including tree structure data. There are three types of value to choose from: String, Number and Object. Have can improve the place also hope that everyone not stingy comment
DOM structure recursion
<a-tabs V-if ="paramsType === 1" @change="tabCallback"> < A-tab-pane key="1" TAB =" template "> <div class="params-model" v-if="currentTab === '1'"> <ul class="params-list"> <li class="params-item"> <div class="input-wrap"> <span>key</span> Value type < span > < / span > < span > value < / span > < / div > < div class = "tools - wrap" > < span > add < / span > < span > delete < / span > < / div > < / li > < li v-for="item in paramsList" :key="item.id"> <div class="params-item"> <div class="input-wrap"> <span><a-input V - model = "item. The key" placeholder = "enter key" > < / a - input > < / span > <! --key--> <span> <a-select v-model="item.type" style="width: 192px" default-value="String"> <a-select-option value="String"> String </a-select-option> <a-select-option value="Number"> Number </a-select-option> <a-select-option value="Object"> Object </a-select-option> </a-select> </span><! --value type--> <span><a-input :disabled="item.type === 'Object'" v-model="item.value" Placeholder =" input value"></a-input></span><! --value--> </div> <div class="tools-wrap"> <span class="add-wrap blue"> <a-icon class="add-item" @click="addJsonBtn(item)" type="plus" /> <div v-if="item.type === 'Object'" class="add-type-wrap"> <p @click="addObjectBtn(item, '1')" class="item"> </p> '2') "class =" item "> child node < / p > < / div > < / span > < span v - if =" item id! == 0" @click="deleteBtn(item)" class="red"><a-icon type="close" /></span> </div> </div> <ul class="params-list" v-if="item.children && item.children.length"> <dialog-params-node :paramsList="item.children"></dialog-params-node> < / ul > < / li > < / ul > < / div > < / a - TAB pane - > < a TAB - pane key = "2" TAB = "preview" > < div > < textarea v - if = "currentTab = = = '2'" rows = "5" Cols = "100" v - HTML = "previewObj" / > < p v - else > temporarily no data < / p > < / div > < / a - TAB pane - > < / a - tabs >Copy the codeChild components
<li v-for="item in paramsList" :key="item.id"> <div class="params-item"> <div class="input-wrap"> <span Padding-left :' + item.style * 10 + 'px'" ><a-input V-model ="item.key" placeholder=" placeholder "></a-input></span><! --key--> <span> <a-select v-model="item.type" style="width: 192px" default-value="String"> <a-select-option value="String"> String </a-select-option> <a-select-option value="Number"> Number </a-select-option> <a-select-option value="Object"> Object </a-select-option> </a-select> </span><! --value type--> <span><a-input :disabled="item.type === 'Object'" v-model="item.value" Placeholder =" input value"></a-input></span><! --value--> </div> <div class="tools-wrap"> <span class="add-wrap blue"> <a-icon class="add-item" @click="addJsonBtn(item)" type="plus" /> <div v-if="item.type === 'Object'" class="add-type-wrap"> <p @click="addObjectBtn(item, '1')" class="item"> </p> '2') "class =" item "> child node < / p > < / div > < / span > < span v - if =" item id! == 0" @click="deleteBtn(item)" class="red"><a-icon type="close" /></span> </div> </div> <ul class="params-list" v-if="item.children && item.children.length"> <dialog-params :paramsList="item.children"></dialog-params> </ul> </li>Copy the codejs
methods: {paramsDataOk () {if (this.paramstype === 1) {// Manually enter this.previewjson () this.$emit('paramsOk', $this.previewobj)} else {// Import json this.$emit('paramsOk', JSON.parse(this.paramsText)) } this.$emit('update:showParams', false) }, tabCallback (key) { if (key === '2') { this.previewJson() } this.currentTab = key }, PreviewJson () {// Preview const json = {} this.paramslist. forEach(item => {if (item.type === 'Number') {json[item.key] = Number(item.value) } else if (item.type === 'Object') { json[item.key] = {} if (item.hasOwnProperty('children')) { item.children.forEach(element => { if (element.type === 'Number') { json[item.key][element.key] = Number(element.value) } else if (element.type === 'Object') { json[item.key][element.key] = {} } else { json[item.key][element.key] = element.value } // json[item.key][element.key] = element.value if (element.hasOwnProperty('children')) { this.parsingJson(json[item.key][element.key], element.children) } }) } } else { json[item.key] = item.value } }) this.previewObj = json }, parsingJson (json, array) { for (let index = 0; index < array.length; index++) { const element = array[index] if (element.type === 'Number') { json[element.key] = Number(element.value) } else if (element.type === 'Object') { json[element.key] = {} } else { json[element.key] = element.value } if (element.hasOwnProperty('children') === false) { if (element.type === 'Number') { json[element.key] = Number(element.value) } else if (element.type === 'Object') { json[element.key] = {} } else { json[element.key] = element.value } break } else { this.parsingJson(json[element.key], element.children) } } }, addJsonBtn (row) { if (row.type ! == 'Object') { this.addItem(row) } }, addItem (row) { const obj = { id: this.getID(3), value: '', key: '', type: 'String', style: 1 } this.paramsList.forEach((item, index) => { if (item.id === row.id) { this.paramsList.splice(index + 1, 0, Obj)}})}, addObjectBtn (row, type) {// type 1- sibling - sibling switch (type) {case '1': this.addItem(row) break case '2': { const obj = { id: this.getID(3), parentId: row.id, value: '', key: '', type: 'String', style: row.style + 1 } const arr = JSON.parse(JSON.stringify(this.paramsList)) arr.forEach((item, index) => { if (item.id === row.id) { if (item.hasOwnProperty('children') === false) { item.children = [] } item.children.push(obj) // this.paramsList.splice(index + 1, 0, obj) } }) this.paramsList = arr } break } }, deleteBtn (row) { this.paramsList.forEach((item, index) => { if (item.id === row.id) { this.paramsList.splice(index, 1) } }) }, cancelBtn () { this.$emit('update:showParams', false) }, getID (length) { return Number(Math.random().toString().substr(3, length) + Date.now()).toString(36) } },Copy the code