封装 el-table


如图实现一个支持以下功能的表格组件:

  1. 配置表格
  2. formmater 自定义字段显示
  3. slot 自定义操作
  4. 分页(可配置)
  5. 多选

代码如下:
QTable.vue

<template>
    <div class="m-table">
        <el-table :data="data" @selection-change="handleSelectionChange">
            <template v-for="item in columns">
                <slot v-if="item.slot && !item.hidden" :name="item.slot" />
                <el-table-column
                    :show-overflow-tooltip="true"
                    v-else-if="!item.hidden"
                    v-bind="item"
                    :key="item.prop"
                    align="center"
                />
            </template>
        </el-table>
        <div class="pagination-wrap" v-if="usePagination">
            <el-pagination
                layout="prev, pager, next, total"
                @current-change="handlePageChange"
                :current-page.sync="pageConfig.page"
                :page-size="pageConfig.size"
                :total="pageConfig.total"
            ></el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    name: 'QTable',
    props: {
        data: {
            required: true,
            type: Array,
            default() {
                return [];
            }
        },
        columns: {
            required: true,
            type: Array,
            default() {
                return [];
            }
        },
        pageConfig: {
            required: false,
            type: Object,
            default() {
                return {
                    page: 1,
                    total: 1,
                    size: 10
                };
            }
        },
        usePagination: {
            type: Boolean,
            default: true
        }
    },
    methods: {
        // 改变页码
        handlePageChange(val) {
            this.$emit('handlePageChange', val);
        },

        // 多选
        handleSelectionChange(val) {
            this.$emit('handleSelectionChange', val);
        }
    }
};
</script>
<style>
.pagination-wrap {
    text-align: center;
}
</style>

使用:

<template>
    <div>
        <q-table
            :data="tableData"
            :columns="tableConfig"
            :page-config="pageConfig"
            @handlePageChange="handlePageChange"
            @handleSelectionChange="handleSelectionChange"
        >
            <el-table-column slot="operation">
                <el-button type="text" size="medium">
                    自定义操作
                </el-button>
            </el-table-column>
        </q-table>
    </div>
</template>

<script>
import QTable from '../../common/QTable/index';
import {TABLE_CONFIG, tableDataMock} from './config';

export default {
    components: {
        QTable
    },
    data() {
        return {
            pageConfig: {
                page: 1,
                total: 0,
                size: 10
            },
            tableData: tableDataMock,
            tableConfig: TABLE_CONFIG,
            multipleSelection: []
        };
    },
    methods: {
        // 改变页码
        handlePageChange(val) {
            this.pageConfig.page = val;
        },
        // 多选结果
        handleSelectionChange(selects) {
            this.multipleSelection = selects;
        }
    }
};
</script>

数据配置:

export const tableDataMock = [
    {
        date: '2016-05-03',
        name: '乐乐',
        address: '上海市普陀区金沙江路 1518 弄'
    },
    {
        date: '2016-05-02',
        name: '梅朵新',
        gender: 1,
        address: '上海市普陀区金沙江路 1518 弄'
    },
    {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
    },
    {
        date: '2016-05-01',
        name: '朱崇科',
        address: '上海市普陀区金沙江路 1518 弄'
    },
    {
        date: '2016-05-08',
        name: '袭来东',
        address: '上海市普陀区金沙江路 1518 弄'
    },
    {
        date: '2016-05-06',
        name: '吉星',
        address: '上海市普陀区金沙江路 1518 弄'
    },
    {
        date: '2016-05-07',
        name: '柴科',
        address: '上海市普陀区金沙江路 1518 弄'
    }
];

// 表格字段
export const TABLE_CONFIG = [
    {
        type: 'selection',
        width: '55'
    },
    {
        prop: 'date',
        label: '日期'
    },
    {
        prop: 'name',
        label: '姓名'
    },
    {
        prop: 'gender',
        label: '性别',
        formatter(row, col, cell) {
            return !cell ? '男' : '女';
        }
    },
    {
        prop: 'address',
        label: '地址'
    },
    {
        slot: 'operation'
    }
];

完整代码地址:https://github.com/obligat/qtable-demo

推荐阅读更多精彩内容