需求

调用页面只需要传入url地址和列即可

基于ElementPlus的分页table分装
2024-09-24 10:52·OpenCSharp
需求
1、传递url地址，自动加载表格数据

2、根据容器自动计算表格高度

3、支持分页开关

4、支持手动重新加载表格数据

实现
调用页面只需要传入url地址和列即可

<hcf-table ref="table" url="/keyvalue/getpagerecords" :page="true">
        <template v-slot:columns>
            <el-table-column type="index" label="#" width="60" />
            <el-table-column prop="key" label="名称" width="200" />
            <el-table-column prop="value" label="值" />
            <el-table-column fixed="right" label="操作" width="100">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="edit(scope.$index, scope.row)">
                        编辑
                    </el-button>
                    <el-button link type="danger" size="small" @click="remove(scope.$index, scope.row)">
                        移除
                    </el-button>
                </template>
            </el-table-column>
        </template>
    </hcf-table>

启用page为是否启用分页

自动计算表格高度，可以通过监听浏览器大小变化重新计算表格高度即可

计算容器高度

const getTableHeight = () => {
    //计算Table
    let padding=15;
    let layouts= document.getElementsByClassName("hcf-layout-main");
    let layout=layouts[0];
    let layoutHeight= layout.clientHeight;
    let layoutPadding=15 *2;//上下两个padding
    let tableOffsetTop=layout.offsetTop;

    //计算Pager
    let tablePagerHeight=0;
    if(props.page==true){
        let pagers= document.getElementsByClassName("hcf-table-pager");
        if(pagers.length>0){
            tablePagerHeight=pagers[0].clientHeight;
        }
    }

    //生成高度
    height.value=layoutHeight-tableOffsetTop-layoutPadding-tablePagerHeight;
};

最后需要支持手动重新加载表格数据，那么开放出一个load的方法，传入指定参数

const load = (params) => {

    var where =Object.assign(defaults.where,{pageIndex:pager.index,pageSize:pager.size});
    let options=defaults;
    if(params){
        Object.assign(where,params.where);
        options= Object.assign(defaults,params);
    }
    options=Object.assign(defaults,where);

    loading.value = true;

    http.post(options.url, options.where).then(result => {
        loading.value = false;

        rows.value = result.rows;
        pager.total = result.count;
    })
}

最后导出load方法

在调用页面调用该load方法，只需要一行即可

table.value.load();

结尾语

根据实际需求对组件的进一步封装可以大大减少代码的书写量，所以我们需要有针对性的进行封装，但注意请勿过度封装，过度封装将会带来可读性的下降。