Field / Section

详情抽屉分区字段：可折叠 RdSection、栅格 RdFieldGrid、字段 RdField，以及「显示字段」配置 RdFieldSettings。

Section + FieldGrid

详情抽屉 / 表单中的分区字段：可折叠 Section + 多列 FieldGrid。

客户名称

Pacific Rim Trading

客户代码

C-00001

客户阶段

—

<script setup lang="ts">
import { ref, computed } from 'vue'
import {
  RdSection,
  RdField,
  RdFieldGrid,
  RdFieldSettings,
  type FieldSettingItem,
} from '@rd-element/ui'

const defaultItems: FieldSettingItem[] = [
  { key: 'name', label: '客户名称', visible: true, fixed: true },
  { key: 'code', label: '客户代码', visible: true },
  { key: 'stage', label: '客户阶段', visible: true },
  { key: 'owner', label: '跟进人', visible: false },
]

const items = ref(defaultItems.map((i) => ({ ...i })))

const customized = computed(() =>
  items.value.some((item, i) => item.visible !== defaultItems[i]?.visible),
)

function onToggle(key: string) {
  const item = items.value.find((i) => i.key === key)
  if (!item || item.fixed) return
  item.visible = !item.visible
}

function onReorder(from: number, to: number) {
  const list = [...items.value]
  const [moved] = list.splice(from, 1)
  if (!moved) return
  list.splice(to, 0, moved)
  items.value = list
}

function onReset() {
  items.value = defaultItems.map((i) => ({ ...i }))
}
</script>

<template>
  <RdSection title="基本信息">
    <template #actions>
      <RdFieldSettings
        :items="items"
        :customized="customized"
        @toggle="onToggle"
        @reorder="onReorder"
        @reset="onReset"
      />
    </template>
    <RdFieldGrid :columns="2">
      <RdField
        v-for="item in items.filter((i) => i.visible)"
        :key="item.key"
        :label="item.label"
        :value="item.key === 'name' ? 'Pacific Rim Trading' : item.key === 'code' ? 'C-00001' : '—'"
        :empty="item.key === 'owner'"
        :link="item.key === 'code'"
      />
    </RdFieldGrid>
  </RdSection>
</template>

API

RdField Attributes

属性名	说明	类型	默认值
label	字段标签	string	—
value	展示值	string	'—'
href	链接地址（有值时渲染 a）	string	—
link	是否链接样式	boolean	false
empty	强制空态样式	boolean	false

RdFieldGrid Attributes

属性名	说明	类型	默认值
columns	列数	1 | 2 | 3	3

RdSection Attributes

属性名	说明	类型	默认值
title	区块标题	string	—
collapsible	是否可折叠	boolean	true
defaultExpanded	默认展开	boolean	true

RdFieldSettings Attributes

属性名	说明	类型	默认值
items	可勾选字段列表	FieldSettingItem[]	—
customized	是否已相对默认定制（影响恢复按钮）	boolean	—
title / hint	浮层标题与说明	string	—

RdFieldSettings Events

事件名	说明	类型
toggle	勾选切换	(key: string) => void
reorder	拖拽排序	(from: number, to: number) => void
reset	恢复默认	() => void

RdFieldSettings Slots

插槽名	说明
—	内置「显示字段」触发按钮，无需插槽