列表视图

列表视图(List View)是用户在Admin Panel中与Collection文档列表交互的地方。在这里，用户可以查看、排序、筛选和分页文档，以找到他们需要的内容。同时，用户还可以在此对多个文档执行批量操作，如删除、编辑或批量发布。

列表视图可以完全替换为自定义视图，也可以通过注入多个自定义组件来添加额外功能或展示元素，而无需替换整个视图。

注意： 只有Collections拥有列表视图。 Globals作为单一文档，没有列表视图。

自定义列表视图

要使用自定义视图完全替换列表视图，可以在Payload Config中使用admin.components.views.list属性：

import { buildConfig } from 'payload'

const config = buildConfig({
  // ...
  admin: {
    components: {
      views: {
        // highlight-start
        list: '/path/to/MyCustomListView',
        // highlight-end
      },
    },
  },
})

以下是自定义列表视图的示例：

服务端组件

import React from 'react'
import type { ListViewServerProps } from 'payload'
import { DefaultListView } from '@payloadcms/ui'

export function MyCustomServerListView(props: ListViewServerProps) {
  return <div>这是一个自定义列表视图(服务端)</div>
}

客户端组件

'use client'
import React from 'react'
import type { ListViewClientProps } from 'payload'

export function MyCustomClientListView(props: ListViewClientProps) {
  return <div>这是一个自定义列表视图(客户端)</div>
}

关于如何构建自定义视图的详细信息，包括所有可用属性，请参阅构建自定义视图。

自定义组件

除了使用自定义视图完全替换列表视图外，你还可以覆盖单个组件。这允许你自定义列表视图的特定部分，而无需完全替换整个视图。

要为 Collection 覆盖列表视图组件，请在Collection 配置中使用 admin.components 属性：

import type { CollectionConfig } from 'payload'

export const MyCollection: CollectionConfig = {
  // ...
  admin: {
    // highlight-start
    components: {
      // ...
    },
    // highlight-end
  },
}

可用选项如下：

Path描述
beforeList在列表视图的文档列表前注入的自定义组件数组。更多详情。
beforeListTable在列表视图的文档表格前注入的自定义组件数组。更多详情。
afterList在列表视图的文档列表后注入的自定义组件数组。更多详情。
afterListTable在列表视图的文档表格后注入的自定义组件数组。更多详情。
listMenuItems在列表控件旁（列和筛选选项之后）的菜单中渲染的组件数组
Description渲染 Collection 描述的组件。更多详情。

beforeList

beforeList 属性允许你在列表视图(List View)的文档列表前注入自定义组件。

要添加 beforeList 组件，可以在 Collection Config 中使用 components.beforeList 属性：

import type { CollectionConfig } from 'payload'

export const MyCollection: CollectionConfig = {
  // ...
  admin: {
    components: {
      // highlight-start
      beforeList: ['/path/to/MyBeforeListComponent'],
      // highlight-end
    },
  },
}

以下是自定义 beforeList 组件的示例：

服务端组件

import React from 'react'
import type { BeforeListServerProps } from 'payload'

export function MyBeforeListComponent(props: BeforeListServerProps) {
  return <div>这是一个自定义的 beforeList 组件 (服务端)</div>
}

客户端组件

'use client'
import React from 'react'
import type { BeforeListClientProps } from 'payload'

export function MyBeforeListComponent(props: BeforeListClientProps) {
  return <div>这是一个自定义的 beforeList 组件 (客户端)</div>
}

beforeListTable

beforeListTable 属性允许你在列表视图(List View)的文档表格前注入自定义组件。

要添加 beforeListTable 组件，可以在 Collection Config 中使用 components.beforeListTable 属性：

import type { CollectionConfig } from 'payload'

export const MyCollection: CollectionConfig = {
  // ...
  admin: {
    components: {
      // highlight-start
      beforeListTable: ['/path/to/MyBeforeListTableComponent'],
      // highlight-end
    },
  },
}

以下是自定义 beforeListTable 组件的示例：

服务端组件

import React from 'react'
import type { BeforeListTableServerProps } from 'payload'

export function MyBeforeListTableComponent(props: BeforeListTableServerProps) {
  return <div>这是一个自定义的 beforeListTable 组件 (服务端)</div>
}

客户端组件

'use client'
import React from 'react'
import type { BeforeListTableClientProps } from 'payload'

export function MyBeforeListTableComponent(props: BeforeListTableClientProps) {
  return <div>这是一个自定义的 beforeListTable 组件 (客户端)</div>
}

afterList

afterList 属性允许你在列表视图(List View)的文档列表之后注入自定义组件。

要添加 afterList 组件，可以在你的 Collection Config 中使用 components.afterList 属性：

import type { CollectionConfig } from 'payload'

export const MyCollection: CollectionConfig = {
  // ...
  admin: {
    components: {
      // highlight-start
      afterList: ['/path/to/MyAfterListComponent'],
      // highlight-end
    },
  },
}

以下是一个自定义 afterList 组件的示例：

服务端组件

import React from 'react'
import type { AfterListServerProps } from 'payload'

export function MyAfterListComponent(props: AfterListServerProps) {
  return <div>这是一个自定义的 afterList 组件 (服务端)</div>
}

客户端组件

'use client'
import React from 'react'
import type { AfterListClientProps } from 'payload'

export function MyAfterListComponent(props: AfterListClientProps) {
  return <div>这是一个自定义的 afterList 组件 (客户端)</div>
}

afterListTable

afterListTable 属性允许你在列表视图(List View)的文档表格之后注入自定义组件。

要添加 afterListTable 组件，可以在你的 Collection Config 中使用 components.afterListTable 属性：

import type { CollectionConfig } from 'payload'

export const MyCollection: CollectionConfig = {
  // ...
  admin: {
    components: {
      // highlight-start
      afterListTable: ['/path/to/MyAfterListTableComponent'],
      // highlight-end
    },
  },
}

以下是一个自定义 afterListTable 组件的示例：

服务端组件

import React from 'react'
import type { AfterListTableServerProps } from 'payload'

export function MyAfterListTableComponent(props: AfterListTableServerProps) {
  return <div>这是一个自定义的 afterListTable 组件（服务端）</div>
}

客户端组件

'use client'
import React from 'react'
import type { AfterListTableClientProps } from 'payload'

export function MyAfterListTableComponent(props: AfterListTableClientProps) {
  return <div>这是一个自定义的 afterListTable 组件（客户端）</div>
}

描述组件

Description 属性允许你在列表视图中渲染自定义的 Collection 描述。

要添加 Description 组件，可以在 Collection 配置 中使用 components.Description 属性：

import type { CollectionConfig } from 'payload'

export const MyCollection: CollectionConfig = {
  // ...
  admin: {
    components: {
      // highlight-start
      Description: '/path/to/MyDescriptionComponent',
      // highlight-end
    },
  },
}

注意： Description 组件在列表视图和 编辑视图 之间共享。

以下是自定义 Description 组件的示例：

服务端组件

import React from 'react'
import type { ViewDescriptionServerProps } from 'payload'

export function MyDescriptionComponent(props: ViewDescriptionServerProps) {
  return <div>这是一个自定义的 Collection 描述组件（服务端）</div>
}

客户端组件

'use client'
import React from 'react'
import type { ViewDescriptionClientProps } from 'payload'

export function MyDescriptionComponent(props: ViewDescriptionClientProps) {
  return <div>这是一个自定义的 Collection 描述组件（客户端）</div>
}