element UI 二次封装表格

写个博客自己记录下，顺便加深记忆！！！！

<template>
    <!-- tableData.slice((page.pi-1)*page.ps,page.pi*page.ps) -->
    <el-table :data="tableData.slice((page.pi-1)*page.ps,page.pi*page.ps)" border style="width: 100%" ref="refTable"
        tooltip-effect="dark" @selection-change="handleSelectionChange" v-loading="isLoading">
        <el-table-column v-if='selection' type="selection" width="55" align="center" />
        <el-table-column v-for="(item,index) in tableLabel" :width="item.width ? item.width : ''" :key="index"
            :align="item.align" :label="item.label" :prop="item.param" :sortable="item.sortable"
            :sort-method='(a,b)=>sortMethod(a,b,item.param)'>
            <template slot-scope="scope">
                <span v-if="item.render">
                    {{item.render(scope.row)}}
                </span>
                <span v-else>{{scope.row[item.param]}}</span>
            </template>
        </el-table-column>
        <el-table-column v-if="tableOption.label" :width="tableOption.width" :label="tableOption.label" align="center"
            fixed="right">
            <template slot-scope="scope">
                <el-button v-for="(item,index) in tableOption.options" :key="index" :type="item.type" :icon="item.icon"
                    @click="handleBtn(item.methods,scope.row)" size="mini">
                    {{item.label}}
                </el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
    export default {
        name: 'hwTable',
        props: {
            page: {
                type: Object,
                default: () => {
                    return {
                        pi: 1,
                        ps: 10
                    }
                }
            },
            isLoading: {
                type: Boolean,
                default: () => {
                    return false
                }
            },
            tableData: {
                type: Array,
                default: () => {
                    return []
                }
            },
            selection: {
                type: Boolean,
                default: () => {
                    return false
                }
            },
            tableLabel: {
                type: Array,
                default: () => {
                    return []
                }
            },
            tableOption: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },
        methods: {
            handleBtn(methods, row) {
                this.$emit('eventBtn', {
                    methods,
                    row
                })
            },
            handleSelectionChange(row) {
                this.$emit('eventBtn', row);
            },
            sortMethod(obj1, obj2, column) {
                var at = obj1[column]
                var bt = obj2[column]
                if (at > bt) {
                    return -1
                } else {
                    return 1
                }
            }
        }
    }
</script>
 

使用方法：

<hwTable :table-data="tableData" :isLoading='isLoading' :table-label="tableLabel" :table-option="tableOption"
            @eventBtn='handleBtn' :page='page'>

import hwTable from '../components/hwTable.vue'

components: {
            hwTable
        },

data(){

return{

tableData: [{
                    date: '2016-05-02',
                    name: '1',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-04',
                    name: '2',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1517 弄',
                    zip: 200333
                }],
                tableLabel: [{
                        label: '用户名',
                        param: 'name',
                        align: 'center',
                        width: '120',
                        sortable: true
                    },
                    {
                        label: '公司名称',
                        param: 'province',
                        align: 'center'
                    },
                    {
                        label: '办公邮箱',
                        param: 'city',
                        align: 'center',
                        width: '300'
                    },
                    {
                        label: '注册时间',
                        param: 'date',
                        align: 'center',
                        sortable: true
                    },
                    {
                        label: '审核状态',
                        param: 'zip',
                        align: 'center',
                        sortable: true,
                        render: (row) => {
                            if (row.status === 0) {
                                return '未审核'
                            } else if (row.status === 1) {
                                return '审核通过'
                            } else if (row.status === 2) {
                                return '审核不通过'
                            } else {
                                return '禁用'
                            }
                        }
                    }
                ],
                tableOption: {
                    label: '操作',
                    width: '200',
                    options: [{
                            label: '预览',
                            type: 'primary',
                            icon: 'el-icon-view',
                            methods: 'preview'
                        },
                        {
                            label: '审核',
                            type: 'primary',
                            icon: 'el-icon-upload2',
                            methods: 'audit'
                        }
                    ]
                }

}

}