【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了，若是你想返回的話，你看看我剛發佈的文章：http://www.javashuo.com/article/p-uwqbtibl-gu.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的使用，以爲能夠的點個推薦吧。