在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數據并渲染到表格中。
上一篇vue div link
下一篇python 架構師