Element UI 是一款流行的基于 Vue.js 的組件庫，它提供了強大的 UI 組件和易于定制的主題設置。

在 Element UI 中，Json 組件是一個非常有用的組件，它能夠幫助我們快速地生成一個可以進行增刪改查操作的表格。

<template>
<div>
<el-json
:value="jsonData"
:columns="jsonColumns"
@edit="handleEdit"
@delete="handleDelete"
@add="handleAdd"></el-json>
</div>
</template>
<script>
export default {
data() {
return {
jsonData: [
{ id: 1, name: 'John', age: 22 },
{ id: 2, name: 'Tom', age: 25 },
{ id: 3, name: 'Amy', age: 27 }
],
jsonColumns: [
{ prop: 'id', label: 'ID', sortable: true },
{ prop: 'name', label: '姓名' },
{ prop: 'age', label: '年齡', editable: true }
]
}
},
methods: {
handleEdit(row, column, cell, event) {
console.log('Edit', row, column, cell, event)
},
handleDelete(row, event) {
console.log('Delete', row, event)
},
handleAdd(row, event) {
console.log('Add', row, event)
}
}
}
</script>

上面的代碼演示了如何使用 Element UI 中的 Json 組件。其中，我們通過給組件傳遞一個包含數據的數組 jsonData 和一個描述表格結構的列數組 jsonColumns 來生成一個表格。jsonColumns 中的每個對象包含了列的 prop 屬性（用于指定數據源中對應的字段）、label 屬性（用于顯示在表頭）和一些可選的特性，例如 sortable（表示該列是否可排序）和 editable（表示該列是否可編輯）。

此外，在 Json 組件中，我們還可以監聽 edit、delete 和 add 事件來進行相應的操作，處理函數的參數中包含了當前操作的行和列信息，以及觸發事件的事件對象。