Element UI是一個基于Vue.js的組件庫，提供了豐富的UI組件，可以幫助我們快速實現頁面的組件化開發。在Element UI中，有一個JsonEditor組件可以用于編輯JSON格式的數據。

下面我們將演示如何使用Element UI來實現一個簡單的JSON編輯器。

<template>
<div>
<el-form :model="form">
<el-form-item label="JSON數據">
<el-input v-model="inputJson" type="textarea" :rows="10"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">提交</el-button>
</el-form-item>
</el-form>
<el-divider></el-divider>
<el-form :model="result">
<el-form-item label="編輯結果">
<el-input v-model="result" type="textarea" :rows="10" readonly></el-input>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
inputJson: ''
},
result: ''
}
},
methods: {
onSubmit() {
try {
const jsonObj = JSON.parse(this.form.inputJson)
this.result = JSON.stringify(jsonObj, null, 2)
} catch (err) {
this.$message.error('JSON格式錯誤！')
}
}
}
}
</script>

以上代碼是一個最簡單的JSON編輯器模板，我們使用了Element UI提供的el-form和el-input組件，通過定義form對象來綁定el-form，使其能夠實現表單數據的收集和提交。其中，我們使用了pre標簽來展示代碼片段。

在onSubmit方法中，我們使用了JSON.parse方法將輸入的JSON字符串轉換成了一個JSON對象，然后將其轉換成帶有縮進的格式化字符串，最后將結果存儲到result變量中。如果輸入的JSON格式不正確，會彈出一個錯誤提示框。

除此之外，還可以對這個模板進行擴展，比如增加文件上傳功能、增加JSON校驗功能等。總之，在Element UI的基礎上進行二次開發，我們可以實現一個功能優良、易用的JSON編輯器。