树结构标签页，前端开始慌了

    在数据展示不多的情况下，这样直接用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>
    )
  }
}

效果图