ant design的Table元件自定義空狀態

2022-09-04 02:42:14 字數 1238 閱讀 7759

table,是antd中乙個我們經常使用的元件,在官方文件中給出了非常詳細的例項以及api,

但在我們在使用過程中可能需要根據專案的要求來定製空狀態時的展示。

什麼是空狀態呢?

在antd的官方文件中他是這麼說的

我們需要做的就是要自定義table的 empty(空狀態),但是在查詢官方文件的過程中,我們並沒有發現table元件提供修改empty的相關介面,它直接使用了antd全域性預設的空狀態。

雖然table沒有提供直接修改empty的介面,但是提供了全域性化配置「configprovider」,我們可以使用全域性化配置來修改antd預設的空狀態,而它的使用也非常的簡單,我們只需要

import  from 'antd';
然後用 來包裹我們需要使用自定義空狀態的元件即可,**如下:

import react, from 'react';

import from 'antd';

const columns =[

,}, ,

,];const data=;

const customizerenderempty = () =>(

//這裡面就是我們自己定義的空狀態

空狀態資訊提示

);class home extends component

}export

default home;

執行結果如下:

我自己也是第一次接觸react和antd,在table裡面找了半天沒發現相關的介面,最後從頭過了一下它官方的文件才發現有「configprovider」這個東西;

所以在我們接觸一些新的ui框架以及前端框架、一些新的技術或者還是其他的一些東西時,

我建議一定要「走馬觀花」的把相關的東西都看一遍,當然我們不一定要把看到的所有東西原理都弄明白。

但是一定要有乙個印象,知道它有這個東西,否則會經常出現一種情況,

參考:

Ant Design主題定製

先介紹下專案背景 如果是採用antd init或antd cli腳手架初始化的專案,可以直接設定theme,相對比較簡單。我的專案框架是react redux,採用webpack打包,在開發環境是用 webpack dev中介軟體配合webpack hot中介軟體執行專案與記憶體中訪問,不在專案本地...

ant design彩蛋思考

今天ant design由於在 中隱藏了乙個聖誕彩蛋,引發了廣大人民群眾的各種感官,大多數都在叫罵。有人說屁大點小事,不值一提。有人說因為這個彩蛋涉及宗教色彩可能會引發一些重大影響。吃完飯去翻了翻repo的issue,真的是什麼人都有 對於我自己而言,當前專案用的還是3.5.x,所以沒有什麼影響。作...

ant design 專案例項

安裝 umi ui 建立新應用 參考官網 第一步 新建路由 建立路由 umi g page products目錄src pages中會新增products.js和products.css兩個檔案 第二步 編寫 ui component 在編輯器中開啟,新建src components product...