【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（這個數據你自己填吧，我就不貼了）

    created(){
        this.proList = [
            {pid:'0003',pname:'MI 手機',price:4000},
            {pid:'0004',pname:'HUAWEI 手機',price:5000},
            {pid:'編號',pname:'手機名稱',price:'價格'}
        ]
        var obj_Display_Model = this.proList[this.proList.length-1];
        for(var keyparmas in obj_Display_Model){
            this.headers.push({
                key:keyparmas,
                title:obj_Display_Model[keyparmas]
            })
        }
    }

　在webApi中你的后台在構建這玩膩的時候，你放到最后，直接拼就好了。當然，這樣還是不夠完美的，那如果我們有N個組件，我們就要寫這樣的重復代碼嗎？我們直接創建my-Table的組件，其定義也是非常的簡單。

<template>
    <Table :data="data_source" :columns="headers"></Table>
</template>
<script>
export default {
    props:{
        data_source:{type:Array,default:[]}
    },
    data(){
        return {
            headers:[]
        }
    },
    created(){
        if (this.data_source.length==0){
            this.headers.push({
                title:'無列名'
            })
            return;
        }

        for(let x in this.data_source[0]){
            this.headers.push({
                title:x,key:x
            })
        }
    }
}
</script>

　　這樣table的自定義組件就ok了，那我們看看調用。

 <my-table :data_source="proList"></my-table>
 import MyTable from './my-table.vue'
export default {
    components:{MyTable},

　列表絕對是有按鈕的，它是進行了一定的操作。

this.headers.push({
            title:'操作',
            render:(createElement,params)=>{

                return createElement('div', [
                    createElement('Button', {
                        props: {type: 'primary',size: 'small'},
                        style: {marginRight: '5px'},
                        on: {click: () => {this.bianji(params.row.pid)}}
                    }, '編輯'),
                    createElement('Button', {
                        props: {type: 'error',size: 'small'},
                        on: {click: () => {this.shanchu(params.row.pid)}}
                    }, '刪除')
                ]);
            }
        })

　　其中render給我們提供了render，通過render我們可以創建dom對象以及一些參數指向的方法，它們指向的方法你直接寫到method中就可以了。那我們如何知道id呢，畢竟我們都是根據id去干一些事情。

你指定的方法的參數就是你的id。

 bianji(pid){
            alert('要編輯的元素編號為:'+pid);
        },

　　

table-filter如何使用？

this.headers[2]["filters"]=[{label:'高於2500',value:0},{label:'低於2500',value:1}];
        this.headers[2]["filterMethod"]=(e,row)=>{
            if (e===0)
            return row.price>2500;
        else   
            return row.price<2500;
        }

　　其中filters是你的過濾體條件，下面如圖所示。

以上就是關於IView結合vue的使用，覺得可以的點個推薦吧。