寫在前面
幾乎在所有的前端UI中使兔，Table組件都有著不可或缺的作用，Table組件對(duì)于數(shù)據(jù)展示谎势，有著天然的優(yōu)勢(shì)凛膏。
Ant-Design官網(wǎng)上，對(duì)于Table組件它浅，有著非常詳細(xì)的API和Demo译柏，比如自帶可編輯單元格、可編輯行功能姐霍，是其他部分UI中所沒有的鄙麦。但是對(duì)于Table組件數(shù)據(jù)為空時(shí)的渲染樣式，卻沒有直接的文檔說(shuō)明镊折。本人之前從事Vue+ElementUI進(jìn)行開發(fā)胯府，ElementUI中Table組件，可以直接通過(guò)empty-text屬性恨胚，或者slot="empty"進(jìn)行配置骂因。效果如下圖：
ConfigProvider全局化配置
關(guān)于ConfigProvider組件，官方API文檔鏈接在此：ConfigProvider API赃泡。
Ant Design官網(wǎng)對(duì)ConfigProvider的解釋是：
為組件提供統(tǒng)一的全局化配置寒波。
ConfigProvider 使用 React 的 context 特性乘盼，只需在應(yīng)用外圍包裹一次即可全局生效。
比如ConfigProvider提供了autoInsertSpaceInButton參數(shù)俄烁，可以全局移除按鈕中2個(gè)漢字之間的空格绸栅；提供了參數(shù)componentSize，可以配置全局ant design組件大小页屠。當(dāng)然還包括其他一系列參數(shù)可以對(duì)全局進(jìn)行配置粹胯。
眾多參數(shù)中，其中一個(gè)參數(shù)是renderEmpty辰企，可以自定義組件空狀態(tài)风纠，類型為function(componentName: string): ReactNode，只需要將Table組件外面包一層ConfigProvider牢贸，并設(shè)置renderEmpty參數(shù)竹观，即可實(shí)現(xiàn)Table組件的空狀態(tài)。實(shí)例代碼如下：
renderEmpty = () => (
<Empty
imageStyle={{
height: 60,
}}
description={
<span>
未添加明細(xì)
</span>
}
>
<Button type='primary' onClick={() => data.push({id: 123, field: 'aaa', fieldName: 'aaaaaa'})}>添加</Button>
</Empty>
)
render() {
return (
<Form ref={this.formRef} initialValues={this.state.editRow} component={false}>
<ConfigProvider renderEmpty={this.renderEmpty}>
<Table
rowKey={record => record.id}
components={{
body: {
cell: EditableCell,
},
}}
bordered
dataSource={data}
columns={this.convertedColumns}
rowClassName='editable-row'
pagination={{
onChange: cancel,
}}
/>
</ConfigProvider>
</Form>
);
}
實(shí)際運(yùn)行效果如下：
最后
至此關(guān)于Table組件空狀態(tài)的代碼就已經(jīng)實(shí)現(xiàn)完畢十减。ConfigProvider提供了非常強(qiáng)大的全局化配置功能栈幸，不僅僅限于配置空狀態(tài)，對(duì)于ConfigProvider的其他功能帮辟，還是很有必要去深入學(xué)習(xí)的速址。
參考鏈接：https://blog.csdn.net/m0_58016522/article/details/121094297
