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

       我们在使用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>
                        &