【React入门实践】结合Ant-Design 从0带你手把手开发包含【列表】和【搜索栏】的简单【用户管理

const init = useCallback(() => {

dispatch('feedback/init')

}, [dispatch])

useEffect(() => {

init()

}, [init])

const columns = useMemo(

() => [

  {

    title: '序号',

    dataIndex: '_id'

  },

  {

    title: '用户名',

    dataIndex: 'username'

  },

  {

    title: '反馈标题',

    dataIndex: 'title'

  },

  {

    title: '反馈内容',

    dataIndex: 'content',

  },

  {

    title: '提交时间',

    dataIndex: 'createdTime',

  },

  {

    title: '状态',

    dataIndex: 'status',

  },

  {

    title: '操作',

    render: (value: any) => (

      <>

        {value.status === 0 && (

          <a type="primary" onClick={() => toggleMessage(value.id)}>

            反馈留言

          </a>

        )}

        {value.status === 1 && (

          <a type="primary" onClick={() => toggleDetail(value.id)}>

            查看

          </a>

        )}

      </>

    )

  }

],

[toggleDetail, toggleMessage]

)

return (

<PageHeaderLayout className={'commonList'}>

  <Search init={init} dispatch={dispatch} />

  <Card

    className={styles.table}

    style={
  { marginTop: 1 }}

    bordered={false}

    bodyStyle={
  { padding: '8px 32px 32px 32px' }}

  >

    <StandardTable

      loading={loading}

      data={listData}

      columns={columns}

      onChange={handleStandardTableChange}

    />

  </Card>

</PageHeaderLayout>

<