vue+element-ui 封装table

tabletext(封装table页面代码)

https://blog.csdn.net/weixin_43886711/article/details/102780607

<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>

            <!--region 数据列-->

            <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>

            <!--region 按钮操作组-->

            <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'>

                                    //也可以换成el-button

                                <span :style="btn.style" size="mini" :class="btn.class" :plain="btn.plain"

                                @click="btn.method(key,scope.row)">{{ btn.label }}

                                </span>

                            </div>

                        </template>

                    </div>

                </template>

            </el-table-column>

            <!--endregion-->

        </el-table>

    </div>

</template>

<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() {

                console.log(4444)

                this.$emit('handelAction')

            }

        },

    }

</script>

<style>

    .operate-group {

        display: flex;

        flex-direction: row;

        justify-content: space-around;

    }

</style>



引用页面

<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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。