色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

element-ui表格渲染json數據

老白2年前10瀏覽0評論

在Vue.js應用程序中,展示數據時,表格是最常用的方式之一。Element UI提供了一個強大的表格組件,可以輕松渲染JSON數據。

首先,在需要引用Element UI的頁面或組件中引入表格組件:

import { Table } from 'element-ui';

接著,在模板中使用表格組件:

<template>
<div>
<el-table
:data="jsonData"
style="width: 100%">
<el-table-column
v-for="key in Object.keys(jsonData[0])"
:key="key"
:prop="key"
:label="key"></el-table-column>
</el-table>
</div>
</template>

在上述代碼片段中,將表格綁定到jsonData數組中并通過v-for循環為列添加元素。其中Object.keys(jsonData[0])返回JSON數據第一條數據的鍵列表,以列名的形式在表格中顯示。

下面是一個完整的表格組件的示例:

<template>
<div>
<el-table
:data="jsonData"
style="width: 100%">
<el-table-column
v-for="key in Object.keys(jsonData[0])"
:key="key"
:prop="key"
:label="key"></el-table-column>
</el-table>
</div>
</template>
<script>
import { Table } from 'element-ui';
export default {
name: 'JsonTable',
components: {
'el-table': Table,
'el-table-column': Table.Column,
},
props: {
jsonData: Array,
},
};
</script>

通過組件props屬性傳入JSON數據并渲染到表格中。