配置面板 Settings

列设置 · 筛选项布局配置。与列表页 FilterBar / FilterDrawer 联用。

列设置 RdTableColumnSettings

<script setup lang="ts">
import { ref, computed } from 'vue'
import {
  RdTableColumnSettings,
  type TableColumnSettingItem,
  type TableColumnSettingAction,
} from '@rd-element/ui'

const defaultItems: TableColumnSettingItem[] = [
  { key: 'name', label: '客户名称', visible: true, order: 0, fixed: true },
  { key: 'code', label: '客户编码', visible: true, order: 1 },
  { key: 'stage', label: '阶段', visible: true, order: 2 },
  { key: 'owner', label: '跟进人', visible: false, order: 3 },
]

const extraActions: TableColumnSettingAction[] = [
  { key: 'merge', label: '合并', title: '合并单元格', activeTitle: '取消合并' },
]

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

const customized = computed(() =>
  columns.value.some(
    (item, i) =>
      item.visible !== defaultItems[i]?.visible ||
      item.tableFixed !== defaultItems[i]?.tableFixed ||
      !!item.flags?.merge !== !!defaultItems[i]?.flags?.merge,
  ),
)

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

function onToggleTableFixed(key: string, side: 'left' | 'right') {
  const item = columns.value.find((i) => i.key === key)
  if (!item || !item.visible) return
  if (item.tableFixed === side) delete item.tableFixed
  else item.tableFixed = side
}

function onToggleAction(columnKey: string, actionKey: string) {
  const item = columns.value.find((i) => i.key === columnKey)
  if (!item || !item.visible) return
  item.flags = { ...item.flags, [actionKey]: !item.flags?.[actionKey] }
}

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

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

<template>
  <RdTableColumnSettings
    :items="columns"
    :customized="customized"
    show-pin-right
    :extra-actions="extraActions"
    hint="勾选显示列，可固定左右、合并，拖拽调整顺序"
    @toggle="onToggle"
    @toggle-table-fixed="onToggleTableFixed"
    @toggle-action="onToggleAction"
    @reorder="onReorder"
    @reset="onReset"
  />
</template>

Attributes

属性名	说明	类型	默认值
items	列配置项（visible / fixed 锁定 / tableFixed 表格固定 / flags 自定义动作）	TableColumnSettingItem[]	—
customized	是否已定制	boolean	—
showPinLeft	是否展示「固定左侧」	boolean	true
showPinRight	是否展示「固定右侧」	boolean	false
extraActions	追加的自定义动作列（与固定左/右同款开关）	TableColumnSettingAction[]	[]
hint	覆盖面板提示文案	string	—

Events

事件名	说明	类型
toggle	显示切换	(key: string) => void
toggleTableFixed	切换表格列固定（左/右互斥）	(key: string, side: 'left' | 'right') => void
toggleAction	切换自定义动作开关	(columnKey: string, actionKey: string) => void
reorder	拖拽排序	(from, to) => void
reset	恢复默认	() => void

Slots

插槽名	说明
append	列设置触发按钮右侧的扩展内容（自定义按钮等）

筛选项配置 RdFilterLayoutSettings

列表筛选项

左侧勾选在筛选栏显示；右侧「快捷」标记为快捷筛选项

• 关键词固定快捷
• 状态快捷
• 地区快捷
• 跟进人快捷

<script setup lang="ts">
import { ref } from 'vue'
import { RdFilterLayoutSettings, type FilterFieldSettingItem } from '@rd-element/ui'

const items = ref<FilterFieldSettingItem[]>([
  { key: 'keyword', label: '关键词', inlineVisible: true, order: 0, fixed: true, quick: true },
  { key: 'status', label: '状态', inlineVisible: true, order: 1, quick: true },
])

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

function onToggleQuick(key: string) {
  const item = items.value.find((i) => i.key === key)
  if (!item) return
  item.quick = !item.quick
}
</script>

<template>
  <RdFilterLayoutSettings
    :items="items"
    style="max-width:360px"
    @toggle="onToggle"
    @toggle-quick="onToggleQuick"
  />
</template>

Attributes

属性名	说明	类型	默认值
items	筛选项配置；含 inlineVisible / quick / order / fixed	FilterFieldSettingItem[]	—
customized	是否已相对默认定制	boolean	—

Events

事件名	说明	类型
toggle	切换是否在筛选栏显示	(key: string) => void
toggleQuick	切换是否为快捷筛选项	(key: string) => void
reorder	拖拽排序	(from, to) => void
reset	恢复默认	() => void