vue.js中如何封装一个iview中的table组件

Question

下面是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中都能对应起来

Answer 1

culumns是生成列数据的，首先是表头，这里不说多表头的事，那需要另加属性，表头里面的th根据culumns循环生成，没用就是里面的title属性。

其次是主体部分，tr根据data循环生成，里面的td还是根据culumns循环生成，里面的内容是data里的数据，即

data[i][culumns[j].key]

Answer 2

其实只需要简单的列表就可以完成，名字顺序是根据数组的位置决定的，然后渲染到列表中，用到的指令v-if，也可以添加自定义指令，加class或者其他