在数据展示不多的情况下,这样直接用antd做好的组件就可以。不清楚是否也有按需加载这样的设计,如果没有,则需要手动去做一个这样的组件,在数据量需展示较多的情况下。
Router配置
{
path: '/system/tag',
name: 'tag',
component: './System/Tag/Index',
},
API
export async function fetchAllTag(){
return request(`${TAG_API}`)
}
API与页面中间层
import {
fetchAllTag
} from '@/services/system';
export default {
namespace: 'systemtag',
state: {
TagList:[]
},
effects: {
*fetchAll({payload},{call , put}){
const response = yield call(fetchAllTag);
yield put({
type: 'reducersTagList',
payload: response
})
},
},
reducers: {
reducersTagList(state , action){
const tags = action.payload;
return {
...state,
TagList: tags.children || []
}
}
}
}
页面
import { PureComponent } from "react";
import { connect } from 'dva';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { Card, Form, Table } from "antd";
@connect(({ systemtag , loading })=>({
systemtag,
loading: loading.models.systemtag
}))
@Form.create()
export default class extends PureComponent{
state={
visible: false ,
confirmLoading: false,
current:{}
}
componentDidMount() {
const { dispatch } = this.props;
dispatch({
type: 'systemtag/fetchAll',
})
}
render() {
const { systemtag: {TagList} , loading } = this.props;
const columns =[{
title: "",
dataIndex:'tagId',
},{
title: "名称",
dataIndex:'tagName',
}];
return(
<PageHeaderWrapper title="标签管理">
<Card>
<Table
columns={columns}
rowKey={'id'}
dataSource={TagList}
loading={loading}
/>
</Card>
</PageHeaderWrapper>
)
}
}