下面是iview 的table<template><Table :columns="columns1" :data="data1"></Table></template><script>export default {    data () {        return {            columns1: [                {                    title: 'Name',                    key: 'name'                },                {                    title: 'Age',                    key: 'age'                },                {                    title: 'Address',                    key: 'address'                }            ],            data1: [                {                    name: 'John Brown',                    age: 18,                    address: 'New York No. 1 Lake Park',                    date: '2016-10-03'                },                {                    name: 'Jim Green',                    age: 24,                    address: 'London No. 1 Lake Park',                    date: '2016-10-01'                },                {                    name: 'Joe Black',                    age: 30,                    address: 'Sydney No. 1 Lake Park',                    date: '2016-10-02'                },                {                    name: 'Jon Snow',                    age: 26,                    address: 'Ottawa No. 2 Lake Park',                    date: '2016-10-04'                }            ]        }    }}</script>上面columns1中單項里面的key是如何和下面data中的 key聯系起來的比如: columns1中的第一項 key : 'name' 可以和下面的data 中的 name: 'John Brown'聯系起來,會在table里面 在一列顯示,我想封裝一個和這個table差不多的組件 ,能實現最簡單的數據展示就行 ,但看不懂這個組件的js是怎么實現的想解決的問題是 (上圖)傳入的 對象 student名字 不能和 灰色 表頭(學生姓名) 對應起來上面 的效果 是直接錯位了怎么才能做到和iview的table 一樣 ,不管 后臺傳入何種順序包含的對象 ,在table中都能對應起來