基于iview对table进行二次封装处理

淡淡的烟草味﹌ 2022-12-29 11:19 420阅读 0赞

## 模板 ##

<template>
        <div>
            <div class="table_box">
                <Table :columns="tableColumns" :data="tableData" :height="tableHeight" v-if="tableColumns.length > 0">
                    
                    <template slot-scope="{ index }" slot="orderNumber">
                        <strong v-if="isOrderNumberAdd">{
       { ((current - 1) * pageSize) + index + 1 }}</strong>
                        <strong v-else>{
       { index + 1 }}</strong>
                    </template>
                    
                    <template v-for="(item, index) in customColumns" :slot="item" slot-scope="{ row, column }">
                       <Tooltip :content="row[item]" transfer placement="top" :key="index">
                            <span class="custom_column_span" :style="{ width: column.width + 'px'}">
                                {
       { row[item] }}
                            </span>
                        </Tooltip>
                    </template>
                </Table>
            </div>
            <div class="paging_box" v-if="showPaging && total > 0">
                <div class="total" v-if="showTotal">共<span>{
       {total}}</span>条数据</div>
                <div v-else></div>
                <Page :total="total" :page-size="pageSize" :show-sizer="showSizer" :current="current" @on-change="handlePageChange" @on-page-size-change="handlePageSizeChange" :page-size-opts="pageSizeOpts" />
            </div>
        </div>
    </template>

## 脚本 ##

## 样式 ##

## 效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]

## 使用方式 ##

import BigCustomTable from '_c/BigCustomTable';
    import {  getHonorList } from 'api/screenApi/gloryAchievementInnovation.js';
    
    data () { 
    	return { 
    		// 表格参数
            moreParamsMeter: { },
            pageNo: 1,
            pageSize: 6,
            total: 0,
            tableDatalist: [],
    	}
    }，
    methods: { 
        // 获取表格数据
        getTableData() { 
            getHonorList(this.moreParamsMeter, this.pageNo, this.pageSize).then((res) => { 
                if (res.code === 200) { 
                    this.tableDatalist = res.data.list;
                    this.total = res.data.total - 0;
                }
            });
        },
        handlePageChange (val) { 
            this.pageNo = val;
            this.getTableData();
        },
        handlePageSizeChange (val) { 
            this.pageSize = val;
            if (this.pageNo !== 1) { 
                return;
            }
            this.getTableData();
        },
    },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: /images/20221120/d9a20da8269943939749bd60cec3a0c6.png