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联系起来的
比如: columns1中的第一项 key : ‘name’ 可以和下面的data 中的 name: ‘John Brown’联系起来,会在table里面 在一列显示,我想封装一个和这个table差不多的组件 ,能实现最简单的数据展示就行 ,但看不懂这个组件的js是怎么实现的

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

clipboard.png

想解决的问题是 (上图)
传入的 对象 student名字 不能和 灰色 表头(学生姓名) 对应起来
上面 的效果 是直接错位了

怎么才能做到和iview的table 一样 ,不管 后台传入何种顺序包含的对象 ,在table中都能对应起来

回答:

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

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

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

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注