配置面板 Settings

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

列设置 RdTableColumnSettings

<script setup lang="ts">
import { ref, computed } from 'vue'
import {
  RdTableColumnSettings,
  type TableColumnSettingItem,
} 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 columns = ref(defaultItems.map((i) => ({ ...i })))

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

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

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"
    @toggle="onToggle"
    @reorder="onReorder"
    @reset="onReset"
  />
</template>

筛选项配置 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 },
  { key: 'status', label: '状态', inlineVisible: true, order: 1 },
])
</script>

<template>
  <RdFilterLayoutSettings
    :items="items"
    style="max-width:360px"
    @toggle="(k) => {}"
  />
</template>

API

RdTableColumnSettings

属性名	说明	类型	默认值
items	列配置项	TableColumnSettingItem[]	—
customized	是否已定制	boolean	—

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

RdFilterLayoutSettings

属性名	说明	类型	默认值
items	筛选项配置列表	FilterFieldSettingItem[]	—
customized	是否已相对默认定制	boolean	—

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