vue.js中如何封裝一個iview中的table組件

下面是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聯(lián)系起來的
比如: columns1中的第一項 key : 'name' 可以和下面的data 中的 name: 'John Brown'聯(lián)系起來,會在table里面 在一列顯示,我想封裝一個和這個table差不多的組件 ,能實現(xiàn)最簡單的數(shù)據(jù)展示就行 ,但看不懂這個組件的js是怎么實現(xiàn)的

===================================

想解決的問題是 (上圖)
傳入的 對象 student名字 不能和 灰色 表頭(學生姓名) 對應起來
上面 的效果 是直接錯位了

怎么才能做到和iview的table 一樣 ,不管 后臺傳入何種順序包含的對象 ,在table中都能對應起來