W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
加載數(shù)據(jù)時(shí)顯示動(dòng)效。
在表格等容器中加載數(shù)據(jù)時(shí)顯示。
constructor(props) {
super(props);
this.table = {
columns: [
{
label: "日期",
prop: "date",
width: 180
},
{
label: "姓名",
prop: "name",
width: 180
},
{
label: "地址",
prop: "address"
}
],
data: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄'
}]
}
}
render() {
return (
<div className="el-loading-demo">
<Loading>
<Table
style={{width: '100%'}}
columns={this.table.columns}
data={this.table.data}
/>
</Loading>
</div>
)
}
可自定義加載文案。
添加text
屬性,其值會(huì)被渲染為加載文案,并顯示在加載圖標(biāo)的下方。
constructor(props) {
super(props);
this.table = {
columns: [
{
label: "日期",
prop: "date",
width: 180
},
{
label: "姓名",
prop: "name",
width: 180
},
{
label: "地址",
prop: "address"
}
],
data: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄'
}]
}
}
render() {
return (
<div className="el-loading-demo">
<Loading text="拼命加載中">
<Table
style={{width: '100%'}}
columns={this.table.columns}
data={this.table.data}
/>
</Loading>
</div>
)
}
隱藏代碼
頁(yè)面數(shù)據(jù)加載時(shí)顯示。
當(dāng)需要全屏遮罩時(shí),可使用fullscreen
修飾符(此時(shí)遮罩會(huì)插入至 body 上)。
constructor(props) {
super(props);
this.state = {
fullscreen: false
}
}
onClick() {
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
this.setState({
fullscreen: false
});
}, 3000);
this.setState({
fullscreen: true
});
}
render() {
return (
<div>
<Button type="primary" onClick={this.onClick.bind(this)}>顯示整頁(yè)加載,3 秒后消失</Button>
{
this.state.fullscreen && <Loading fullscreen={true} />
}
</div>
)
}
參數(shù) | 說(shuō)明 | 類型 | 可選值 | 默認(rèn)值 |
---|---|---|---|---|
fullscreen | 是否全屏顯示 | bool | - | false |
text | 自定義加載文案 | string | - | - |
loading | 控制加載頁(yè)顯示 | bool | - | true |
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: