react ~4.组件table的使用及表格分页处理
生活随笔
收集整理的這篇文章主要介紹了
react ~4.组件table的使用及表格分页处理
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
antd里面表格數(shù)據(jù)分為三部分，columns:該對(duì)象數(shù)組用于設(shè)置表頭數(shù)據(jù)，里面的dataIndex是對(duì)象數(shù)據(jù)里面對(duì)應(yīng)的key， data:該對(duì)象數(shù)組用于設(shè)置每行的對(duì)應(yīng)表頭columns的數(shù)據(jù)， pagination:該對(duì)象用于設(shè)置分頁(yè)
columns: [{
title: '序號(hào)',
dataIndex: 'indexs',
className: 'first-column',
'80px'
}, {
title: '服務(wù)名稱',
dataIndex: 'asvServiceName',
className: 'middle-column',
'180px'
}, {
title: 'api_name',
dataIndex: 'asvServiceId',
className: 'middle-column',
'220px'
}, {
title: '所屬系統(tǒng)',
dataIndex: 'asvCallPlateform',
className: 'middle-column',
'150px',
render: (text, record) => (
{text == '01' ? '連接平臺(tái)'
: text == '02' ? '中臺(tái)'
: text == '03' ? '理財(cái)'
: text == '04' ? '網(wǎng)貸'
: text == '05' ? '核心'
: text == '06' ? '風(fēng)控'
: text == '07' ? 'jarslink' : ''}
),
}, {
title: '服務(wù)狀態(tài)',
dataIndex: 'asvStatus',
'100px',
className: 'middle-column',
render: (text, record) => (
{text == '0' ? '啟用' : text == '1' ? '停用' : ''}
),
}, {
title: '版本號(hào)',
dataIndex: 'apiVersion',
'100px',
className: 'middle-column',
}, {
title: '注冊(cè)時(shí)間',
dataIndex: 'createDate',
className: 'middle-column',
'170px'
}, {
title: '操作',
'220px',
dataIndex: 'action',
className: 'last-column',
render: (text, record) => (
<Fragment>//用于包裹需要包裹的標(biāo)簽，但是不會(huì)生成標(biāo)簽
//之所以不用antd的Button組件，是因?yàn)樵谑褂玫臅r(shí)候會(huì)出現(xiàn)莫名樣式，eg:圣誕節(jié)的時(shí)候出現(xiàn)的頂部白云塊。對(duì)于要求嚴(yán)苛的設(shè)計(jì)頁(yè)面是不允許出現(xiàn)這種情況的
<button className='table-button' style={{ marginRight: 10 }} onClick={() => this.queryHandle(record)}> 查看</button>
<button className='table-button' style={{ marginRight: 10 }} onClick={() => this.modifyHandle(record)}>修改</button>
{/* <button className='table-button' onClick={() => record.asvStatus == '0' ? this.deleteHandle(record, record.apiVersion) : this.openHandle(record.asvServiceId, record.apiVersion)}>{record.asvStatus == '0' ? '停用' : record.asvStatus == '1' ? '啟用' : ''}</button> */}
</Fragment>
),
}],
data: [],
paginationNo: {
pageSize: 10,//每頁(yè)的條數(shù)
current: 1,//當(dāng)前頁(yè)
total: 10,//總數(shù)據(jù)
onChange: this.pagesNo.bind(this),//點(diǎn)擊分頁(yè)號(hào)時(shí)觸發(fā)的方法
hideOnSinglePage: true//為true則數(shù)據(jù)條數(shù)不滿或剛好一頁(yè)，則隱藏分頁(yè)器
},
componentDidMount() {
this.setState({
loadhold: true,
});
this.pagesNo(1, 10);
}
toNew(item) {
this.props.history.push('/service/atom/add');
}
queryHandle(item) {
this.props.history.push({
pathname: "/service/atom/query",
state: {
item: item
}
});
}
addHandle(record) {
console.log(record.indexs);
}
modifyHandle(record) {
this.props.history.push({
pathname: "/service/atom/modify",
state: {
item: record
}
});
}
deleteHandle(record, val) {
this.setState({
hasVisible: true,
asvServiceId: record.asvServiceId,
apiVersion: val,
apiId: record.apiId,
itemData: {
title: '服務(wù)停用',
tbody: '服務(wù)停用后，產(chǎn)品將無(wú)法關(guān)聯(lián)該服務(wù)。若需關(guān)聯(lián)，需重新啟用該服務(wù)'
}
});
}
openHandle(item, val) {
let that = this;
const data = {
'serviceOperateType': 1,
'asvServiceId': item,
'apiVersion': val,
'apiId': this.state.apiId
};
const apiUrl1 = MI.baseURI + `/ability/start-or-shutdown`;
fetchPost(apiUrl1, data).then((response) => {
if (response.success) {
message.success('啟用成功！！');
that.setState({
loadhold: true,
});
this.pagesNo(1, 10);
} else {
this.setState({
loadhold: false,
});
message.error(response.msg);
}
});
}
changeStatus = (status, status_bool) => {
let that = this;
this.setState({
hasVisible: status
});
if (status_bool) {
const data = {
'serviceOperateType': 0,
'asvServiceId': this.state.asvServiceId,
'apiVersion': this.state.apiVersion,
'apiId': this.state.apiId
};
const apiUrl1 = MI.baseURI + `/ability/start-or-shutdown`;
fetchPost(apiUrl1, data).then((response) => {
if (response.success) {
message.success('停用成功！！');
that.setState({
loadhold: true,
});
this.pagesNo(1, 10);
} else {
this.setState({
loadhold: false,
});
message.error(response.msg);
}
});
}
}
pagesNo(page, pageSize) {
this.setState({
loadhold: true,
});
var jjs = (page - 1) * pageSize;
const data = {
"pageNum": page,
"pageSize": '10',
'asvCallPlateform': this.state.asvCallPlateform == '00' ? '' : this.state.asvCallPlateform,
'asvServiceName': this.state.asvServiceName,
'asvStatus': this.state.serviceOperateType == 'jack' ? '' : this.state.serviceOperateType
};
const apiUrl1 = MI.baseURI + `/ability/list`;
fetchPost(apiUrl1, data).then((response) => {
if (response.success) {
for (var i = 0; i < response.data.list.length; i++) {
response.data.list[i].indexs = i + 1 + jjs;//設(shè)置序號(hào)
}
this.setState({
data: response.data.list,
loadhold: false,
paginationNo: {
pageSize: response.data.pageSize,
current: response.data.pageNum,
total: response.data.totalCount,
onChange: this.pagesNo.bind(this),
className: 'myPagination',
showTotal: showTotal//
showTotal方法 function showTotal(total) {//用于分頁(yè)器顯示總條數(shù)的方法
return `共${total}條記錄`;
}
}
});
} else {
this.setState({
loadhold: false,
});
message.error(response.msg);
}
});
}
//所屬系統(tǒng)
handleChangeS(val) {
console.log(val);
this.setState({
asvCallPlateform: val
});
}
//服務(wù)狀態(tài)
handleChangeM(val) {
console.log(Number(val));
this.setState({
serviceOperateType: Number(val)
});
}
//服務(wù)名稱
sm_servicename_query(e) {
this.setState({
asvServiceName: e.target.value
});
}
sm_query() {//通過(guò)條件查詢查詢
var that = this;
this.setState({
loadhold: true,
});
this.pagesNo(1, 10);
}
//重置
sm_reset() {
var that = this;
this.setState({
loadhold: true,
asvCallPlateform: '00',
asvServiceName: '',
serviceOperateType: 'jack'
});
setTimeout(() => {
this.pagesNo(1, 10);
}, 1000);
}
總結(jié)
以上是生活随笔為你收集整理的react ~4.组件table的使用及表格分页处理的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 如何检测浏览器是否安装了Adblock，
- 下一篇： 典型案例道出“服务台”的价值