elementPlus 分页实现首页，尾页的功能

标签：el elementPlus const val 尾页 首页 background total data

跪求出一个这个方法吧，自己写真麻烦，但是也是闲着没事，写一个吧

 

                <div class="pagefun">
　　　　　　　　　　　　<!--首页按钮  disabled是鼠标禁止状态    pagenotallowd   鼠标禁用 一个红色的圈加一个斜杠 -->

                    <button
                        :class="['firstpage',firstPageDisabled ? 'pagenotallowd' :'' ]"
                        :disabled="firstPageDisabled"
                        @click="gofirst"
                    > 
                       <DArrowLeft /> 
                    </button>  
                    <el-pagination
                        v-model:current-page="currentPage"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 20, 50, 100]"
                        :background="true"
                        layout="prev, pager, next, sizes,->,jumper"
                        :total="total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    
                    /> 
                    <button
                        :class="['lastpage',lastPageDisabled ? 'pagenotallowd' :'' ]"
                        :disabled="lastPageDisabled"
                        @click="golast" 
                    >
                     <DArrowRight />
                    </button> 
                </div>
                
            </div>

　　

 

 

引入icon文件：

import { DArrowRight, DArrowLeft } from '@element-plus/icons-vue';

const data = reactive({
    tableData:[],
    pageSize:10,
    total:0,
    pages:1,
    isdownload:false,
    firstPageDisabled:false,
    lastPageDisabled:false,
})
const currentPage = ref(1);
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  data.pageSize = val; 
  getData();
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  currentPage.value = val; 
  getData();
}
//去首页
const gofirst = ()=>{
    handleCurrentChange(1);
}
//去尾页
const golast = ()=>{
    handleCurrentChange(data.pages);
}

const getData = ()=>{
    let params = {
        pageNo:currentPage.value,
        pageSize:data.pageSize,
    }
    axios.getList(params).then((res: any) => {
        
        if (res.code == 200) {
            data.tableData = res.data.list;
            data.total = res.data.total; //总条数
            data.pages = res.data.totalNum; //总页数
            if(data.pages  > 0 ){
                data.firstPageDisabled = currentPage.value === 1;
                data.lastPageDisabled = currentPage.value === data.pages ;
            }
        }
    });
}

const {
    tableData,
    pageSize,
    total,
    pages,
    isdownload,
    firstPageDisabled,
    lastPageDisabled,
} = toRefs(data);

 

 

 

 

css，我是把哪个箭头定位过去的，因为右侧是固定宽度的，所以可以用定位实现

.pagefun{
                display: flex;
                align-items: center;
                .firstpage ,.lastpage{ 
                    width: 24px;
                    background: #fff;
                    margin-top: 2px; 
                }
                // 鼠标经过样式
                .firstpage:hover ,.lastpage:hover{
                    color: #1682FF;
                }
                .lastpage{ 
                    position: absolute;
                    right: 350px;
                }
                // 鼠标禁止状态
                .pagenotallowd{
                    cursor: no-drop;
                    cursor: not-allowed;
                }
            }
            :deep .el-pagination__sizes{
                margin-left: 70px;
            }
            :deep .el-pager li{ 
                border: 1px solid #DCDCDC;
            }
            :deep .el-pagination.is-background .el-pager li:not(.is-disabled).is-active{
                background-color: #1890FF!important;
                color: #FFFFFF;
                font-weight: 700;
            }
            :deep .el-pagination.is-background .btn-next, :deep .el-pagination.is-background .btn-prev, :deep .el-pager li{
                background: #fff;
            }

 

标签：el,elementPlus,const,val,尾页,首页,background,total,data
From： https://www.cnblogs.com/xbxxf/p/17118609.html