vue+element-ui 封装table表格

薛焱
2023-12-01

封装table页面(转载 ==在转载的基础上增加分页)

<template>
    <div class="table">
        <el-table id="iTable" v-loading.iTable="options.loading" :data="list" :stripe="options.stripe"
            ref="mutipleTable" @selection-change="handleSelectionChange" border>
            <!--选择框-->
            <el-table-column v-if="options.mutiSelect" type="selection" style="width: 55px;">
            </el-table-column>
            <!--end-->
            <!--数据列-->
            <template v-for="(column, index) in columns">
                <el-table-column :prop="column.prop" :key='column.label' :label="column.label" :align="column.align"
                    :width="column.width">
                    <template slot-scope="scope">
                        <template v-if="!column.render">
                            <template v-if="column.formatter">
                                <span v-html="column.formatter(scope.row, column)"></span>
                            </template>
                            <template v-else>
                                <span>{{scope.row[column.prop]}}</span>
                            </template>
                        </template>
                        <template v-else>
                            <expand-dom :column="column" :row="scope.row" :render="column.render" :index="index">
                            </expand-dom>
                        </template>
                    </template>
                </el-table-column>
            </template>
            <!--end-->
            <!--按钮操作组-->
            <el-table-column ref="fixedColumn" label="操作" align="center" :width="operates.width" :fixed="operates.fixed"
                v-if="operates.list.filter(_x=>_x.show === true).length > 0">
                <template slot-scope="scope">
                    <div class="operate-group">
                        <template v-for="(btn, key) in operates.list">
                            <div class="item" v-if="btn.show" :key='btn.id'>
                                <span :style="btn.style" size="mini" :class="btn.class" :plain="btn.plain"
                                    @click="btn.method(key,scope.row)">{{ btn.label }}
                                </span>
                                <!-- <el-button :type="btn.type" size="mini" :icon="btn.icon" :disabled="btn.disabled"
                                    :plain="btn.plain" @click.native.prevent="btn.method(key,scope.row)">{{ btn.label }}
                                </el-button> -->
                            </div>
                        </template>
                    </div>
                </template>
            </el-table-column>
            <!--end-->
        </el-table>
    </div>
</template>
<!--end-->
<script>
    import { mapGetters } from 'vuex';
    export default {
        props: {
            list: {
                type: Array,
                default: []
            }, // 数据列表
            columns: {
                type: Array,
                default: []
            }, // 需要展示的列 === prop:列数据对应的属性,label:列名,align:对齐方式,width:列宽
            operates: {}, // 操作按钮组 === label: 文本,type :类型(primary / success / warning / danger / info / text),show:是否显示,icon:按钮图标,plain:是否朴素按钮,disabled:是否禁用,method:回调方法
            options: {
                type: Object,
                default: {
                    stripe: false, // 是否为斑马纹 table
                    highlightCurrentRow: false // 是否要高亮当前行
                },
            } // table 表格的控制参数
        },
        //组件
        components: {
            expandDom: {
                functional: true,
                props: {
                    row: Object,
                    render: Function,
                    index: Number,
                    column: {
                        type: Object,
                        default: null
                    }
                },
                render: (h, ctx) => {
                    const params = {
                        row: ctx.props.row,
                        index: ctx.props.index
                    }
                    if (ctx.props.column) params.column = ctx.props.column
                    return ctx.props.render(h, params)
                }
            }
        },
        // 数据
        data() {
            return {
                pageIndex: 1,
                multipleSelection: [], // 多行选中

            }
        },
        mounted() { },
        computed: {},
        methods: {

            // 多行选中
            handleSelectionChange(val) {
                this.multipleSelection = val
                this.$emit('handleSelectionChange', val)
            },
            // 显示 表格操作弹窗
            showActionTableDialog() {
                this.$emit('handelAction')
            }
        },

    }
</script>
<style>
    .operate-group {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
</style>

引用table页面

<template>
    <div class="app-container calendar-list-container">
        <el-row>
            <el-col :span="24">
                <div>
                    <tabletext :list="list" @handleSelectionChange="handleSelectionChange" :options="options"
                        :columns="columns" :operates="operates">
                    </tabletext>
                    <div class="pagination-container">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]"
                            :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper"
                            :total="total"> </el-pagination>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import tabletext from 'views/layout/tabletext';
    import { page } from 'api/dl/meter/index';
    export default {
        name: 'table1',
        components: {
            tabletext
        },
        computed: {},
        data() {
            return {
                list: [], // table数据
                listQuery: {
                    page: 1,
                    limit: 20,
                    systemname: undefined
                },
                total: null,
                options: {
                    stripe: true, // 是否为斑马纹 table
                    loading: false, // 是否添加表格loading加载动画
                    highlightCurrentRow: true, // 是否支持当前行高亮显示
                    mutiSelect: false, // 是否支持列表项选中功能
                }, // table 的参数
                columns: [
                    {
                        prop: 'meterid',
                        label: '电表ID',
                        align: 'center',
                    }, {
                        prop: 'title',
                        label: '电表名称',
                        align: 'center',
                        formatter: (row, column, cellValue) => {
							console.log(row.isenable)
							console.log(row)
                            return `<span style="white-space: nowrap;color: dodgerblue;">${row.metername}</span>`
                        }
                    },{
                        prop: 'meteraddress',
                        label: '电表地址',
                        align: 'center',
                    }, {
                        prop: 'magnification',
                        label: '倍率',
                        align: 'center',
                    },{
                        prop: 'manufacturer',
                        label: '厂家',
                        align: 'center',
                    },{
                        prop: 'metermodel',
                        label: '型号',
                        align: 'center',
                    },{
                        prop: 'meterrule',
                        label: '规约',
                        align: 'center',
                    },{
                        prop: 'cabinetnum',
                        label: '柜号',
                        align: 'center',
                    },{
                        prop: 'remark',
                        label: '备注',
                        align: 'center',
                    },{
                        prop: 'isenable',
                        label: '是否有效',
                        align: 'center',
						render: (h, params) => {
                            return h('span', {
                            }, params.row.isenable === '1' ? '是' : params.row.isenable === '2' ? '否' : '')
                        }
                    },
                ], // 需要展示的列
                // 按钮
                operates: {
                    width: 150,
                    list: [
                        {
                            id: '1',
                            label: '编辑',
                            style: 'cursor:pointer;color: #409eff;',
                            show: true,
                            class: 'el-icon-edit',
                            plain: true,
                            method: (scope, row) => {
								console.log(scope)
								console.log(row)
                                this.handleEdit(row)
                            }
                        },
                        {
                            id: '2',
                            label: '删除',
                            style: 'cursor:pointer;color: #b3450e;',
                            class: 'el-icon-delete',
                            show: true,
                            plain: false,
                            method: (index, row) => {
                                this.handleDel(row)
                            }
                        }
                    ]
                } // 列操作按钮
            }
        },
        created() {
            this.getList();
        },
        methods: {
            // 选中行
            handleSelectionChange(val) {
                console.log('val:', val)
            },
            // 编辑
            handleEdit(index, row) {
                console.log(' index:', index)
                console.log(' row:', row)
            },
            // 删除
            handleDel(index, row) {
                console.log(' index:', index)
                console.log(' row:', row)
            },

            getList() {
                console.log(this.listQuery)
                page(this.listQuery).then(response => {
                    this.list = response.data.rows;
                    this.total = response.data.total;
                })
            },
            handleSizeChange(val) {
                console.log(val)
                this.listQuery.limit = val;
                this.getList()
            },
            handleCurrentChange(val) {
                console.log(val)
                this.listQuery.page = val;
                this.getList()
            },
        }
    }
</script>
 类似资料: