【Vue】IView之table组件化学习（二）

最基本的绑定table是这样的，需要columns和data两个属性。

<template>
    <Card>
        <h4>表格栗子</h4>
        <Table :columns="cols" :data="stuList"></Table>
    </Card>
</template>

<script>
export default {
     data(){
        return {
            cols:[
                {title:'编号',key:'id'},{title:'性别',key:'gender'}
            ],
            stuList:[
                {id:1,name:'小明',gender:'男'}
            ]
        }
    }
}
</script>

　　效果如下：

可以发现这样每次都需要频繁的指定列明和属性，所以我们用了下面的这种办法；定义对象列表（当然，这里就忽略了异步请求）

created(){
        this.proList = [
            {pid:'0001',pname:'OPPO 手机ajsdflajfksjldfjaklsjdflajsdklfjalsjfljasldjfalkjsdkflajlskdjfaljsdfkajskljdfkljsljf',price:2000},
            {pid:'0002',pname:'VIVO 手机',price:3000},
            {pid:'0003',pname:'MI 手机',price:4000},
            {pid:'0004',pname:'HUAWEI 手机',price:5000},
        ]
    }

因为我们需要指定columns，其中就是表头，所以我们应该去提取其中一个对象的列名数组，然后push到一个属性里。这样我们的就实现了，那我们如何获取里面的属性名呢？

 for(let x in this.proList[0]){
            console.log(x);
            // this.headers.push({
            //     title
            // })
        }

直接去循环里面的第一个标本就ok，当然这排除了有不规则对象数组的可能；之后呢我们直接往里面拼columns即可（其中的两个参数）

还有需要注意的是，我们绑定的title只能是英文名，这种情况你只能和后台协同，看看能不能返回displayName了，如果你想返回的话，你看看我刚发布的文章：https://www.cnblogs.com/ZaraNet/p/10048243.html

然后直接拼写其中的key和title即可，那么我们也只能这么搞了。

 created(){
        this.proList = [
            {pid:'0001',pname:'OPPO 手机ajsdflajfksjldfjaklsjdflajsdklfjalsjfljasldjfalkjsdkflajlskdjfaljsdfkajskljdfkljsljf',price:2000},
            {pid:'0002',pname:'VIVO 手机',price:3000},
            {pid:'0003',pname:'MI 手机',price:4000},
            {pid:'0004',pname:'HUAWEI 手机',price:5000},
        ]
        for(let x in this.proList[0]){
            console.log(x);
             this.headers.push({
                 title:x,
                 key:x
             })
        }
    }

<Table :columns="headers" :data="proList"></Table>

如果你说你的后台传过来了displayName，你可以这么搞。假如数据中已经有displayName（这个数据你自己填吧，我就不贴了）

当然，这样还是不够完美的，那如果我们有N个组件，我们就要写这样的重复代码吗？

扫描二维码关注公众号，回复： 4315166 查看本文章

【Vue】IView之table组件化学习（二）

猜你喜欢