iview table是vue.js的一個(gè)強(qiáng)大擴(kuò)展組件，可用于創(chuàng)建動(dòng)態(tài)、交互式的表格。其中，json格式是iview table非常重要的數(shù)據(jù)來源之一。在此，我們將介紹如何使用json數(shù)據(jù)填充iview table。

<template>
<div>
<Table :columns="columns" :data="data" />
</div>
</template>
<script>
export default {
data() {
return {
columns: [
{
title: '姓名',
key: 'name'
},
{
title: '年齡',
key: 'age',
sortable: true
},
{
title: '地址',
key: 'address'
}
],
data: [
{
name: '張三',
age: 18,
address: '北京市海淀區(qū)'
},
{
name: '李四',
age: 22,
address: '上海市浦東新區(qū)'
},
{
name: '王五',
age: 26,
address: '廣州市天河區(qū)'
}
]
};
}
};
</script>

在以上代碼中，我們使用了iview table的兩個(gè)關(guān)鍵屬性：columns和data。其中，columns表示表格列的元數(shù)據(jù)，包括各列的標(biāo)題和排序等議項(xiàng)；data則代表了表格中的所有數(shù)據(jù)。

在data中，每一個(gè)數(shù)據(jù)項(xiàng)都應(yīng)該是一個(gè)JSON對(duì)象，其屬性名稱與columns中各列的key相對(duì)應(yīng)。以以上代碼為例，我們可以看到一個(gè)名為data的數(shù)組，包含了3個(gè)名為name、age和address的數(shù)據(jù)項(xiàng)。

通過以上的例子，你已經(jīng)了解了如何使用JSON數(shù)據(jù)填充iview table。我們希望這篇文章對(duì)你有所幫助，祝愿你在vue.js的開發(fā)工作中愉快！