vue 自定义jq的tabledata表格插件的分页条

最新推荐文章于 2025-07-10 20:06:27 发布

置顶

卡塔库栗

最新推荐文章于 2025-07-10 20:06:27 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签：自定义分页条 vue tabledata 悬浮

本文链接：https://blog.youkuaiyun.com/lixiwoaini/article/details/85327070

针对tabledata表格插件，当每页显示数据过多导致分页条不可见的问题，本文介绍了如何使用Vue创建一个自定义分页条并实现悬浮效果。包括组件的实现思路、代码结构和国际化支持，提供了详细的使用方法和组件包。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们在使用tabledata表格插件的时候，如果我们将每页的显示总数大于页面显示条数的时候，这时我们的分页及相关信息就会看不见，希望分页条可以浮动在某一个地方，因此工程决定自定义vue标签去实现此功能。

效果图：

本组件的思路是自定义一个vue的标签，然后根据各个需要的table页面去适配，具体代码和使用方法如下：

1.index.vue

<template>
    <div id="control_div" class="table-footer">
        <div class="table-statistic" v-html="$t('fixedHeader.page_info', { 'start': start ,'end': end,'recordsTotal': recordsTotal})"></div>
        <ul class="pager">
            <li>
                <div class="dropup btn-group-d">
                    <button class="btn-d dropdown-toggle pager-label" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-html="$t('fixedHeader.page_length', { 'length': length })">
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
                        <li><a href="#" @click="select_length(10)">10</a></li>
                        <li><a href="#" @click="select_length(25)">25</a></li>
                        <li><a href="#" @click="select_length(50)">50</a></li>
                        <li><a href="#" @click="select_length(100)">100</a></li>
                        <li><a href="#" @click="select_length(200)">200</a></li>
                        <li><a href="#" @click="select_length(500)">500</a></li>