vue3 ts語法使用element plus分頁組件警告錯誤

main.ts:20 ElementPlusError: [ElPagination] Deprecated usages detected, please refer to the el-pagination documentation for more details
    at debugWarn (error.ts:13:37)
    at Proxy.<anonymous> (pagination.ts:203:9)
    at renderComponentRoot (runtime-core.esm-bundler.js:914:44)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5649:57)
    at ReactiveEffect.run (reactivity.esm-bundler.js:190:25)
    at instance.update (runtime-core.esm-bundler.js:5763:56)
    at setupRenderEffect (runtime-core.esm-bundler.js:5777:9)
    at mountComponent (runtime-core.esm-bundler.js:5559:9)
    at processComponent (runtime-core.esm-bundler.js:5517:17)
    at patch (runtime-core.esm-bundler.js:5119:21)

引起以上警告信息的代碼如下：

<el-pagination 
    :current-page="p.page + 1" 
    :page-size="p.pageSize" 
    :page-sizes="[10, 15, 20, 50]"
    background 
    layout="total, sizes, prev, pager, next, jumper"
    :total="tableData.totalElements"                   這一行引發(fā)錯誤
    @update:page-size="handleSizeChange" 
    @update:current-page="handleCurrentChange"/>

引起錯誤的原因是  :total屬性賦值必須為數(shù)字類型。

修改為如下即可：

:total="parseInt(tableData.totalElements)"

vue Element-ui之el-pagination踩過的坑

由于頁面設計得彈窗他寬度不夠，還要分成三部分，中間部分是選擇人的分頁，這就很難辦了，把能省的都省了，寬度還是太大，就想著把分頁跳轉的改少一些，設置可選的跳轉為3頁，其余省略號顯示，我選擇了pager-count，如下：

   <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="leftPage.currentPage"
        layout="prev, pager, next,sies, jumper"
        :total="10"
        :pagerCount="2"
      ></el-pagination>

雖然頁面顯示出來了。。。但是報錯了

• 頁面：

• 報錯：

 [Vue warn]: Invalid prop: custom validator check failed for prop "pagerCount".

完了就去查了element的手冊

意思就是pager-count只能設置5-21的奇數(shù)，無法實現(xiàn)只顯示兩個頁碼所以我就給設置了最小值5了，結果頁面顯示還可以。 

總結

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論