UseCrudTable - Crud表格

组件介绍

UseCrudTable 是基于 UseElForm 和 UseElTable 进一步封装的一站式增删改查表格组件，在保留原表单、表格组件所有特性的基础上，通过统一配置入口、自动化列处理、灵活插槽扩展等能力，解决中后台 CRUD 场景中表单与表格配置分散、逻辑冗余、扩展困难等问题，无需重复编写列过滤、排序、动态更新等冗余代码，极大提升表单 + 表格组合场景的开发效率与代码可维护性。

核心亮点

配置归一化，表单 / 表格一份配置驱动
自动化列过滤与排序，减少手动处理逻辑
多插槽灵活扩展，适配个性化定制场景
深度监听配置变更，自动同步视图更新
原生属性透传 + 默认值优化，兼容且易用

解决痛点

表单 / 表格配置分散且重复，维护成本高

痛点：传统开发需分别定义表单列（formColumns）和表格列（tableColumns），大量字段（如 prop、label）重复配置，维护时需同步修改，易出现字段不一致、漏改问题，且配置分散导致代码可读性差。
解决方案：设计configs统一配置入口，整合 FormColumn 与 TableColumn 核心配置（剔除重复的 prop 字段），新增onlySearch（仅查询字段）、tableOrder（表格列排序）扩展字段，一份配置同时驱动表单渲染与表格展示，消除重复配置，保证字段一致性，降低维护成本。

列过滤、排序需手动编写大量冗余逻辑

痛点：表单需筛选含有效配置（如 xxxConfig 且非 extConfig）的字段，表格需排除仅查询字段、按规则排序，手动遍历判断易遗漏，排序时易出现重复值导致排序失效，且需额外编写校验逻辑，代码冗余且易出错。
解决方案：内置getFilteredFormColumns方法自动过滤出包含有效配置的表单列，内置getFilteredAndSortedTableColumns方法自动过滤onlySearch: true的仅查询字段，同时按tableOrder排序（未指定则默认索引 + 1），并校验重复的tableOrder值并打印控制台警告，完全替代手动处理逻辑。

组件扩展性差，个性化定制需修改源码

痛点：传统封装的表格组件固定布局，无法在表单与表格间插入自定义内容（如操作按钮、筛选标签）；表格底部需自定义内容或替换表格区域时，需修改组件源码，灵活性极低。
解决方案：提供crudBetween插槽用于表单与表格间插入自定义内容，提供crudBottom插槽结合useBottomSlot配置（为 true 时不渲染表格）可替换表格区域；同时自动识别并透传所有自定义插槽至 UseElTable，兼容表格列自定义渲染、操作列等场景，无需修改源码即可完成个性化定制。

配置动态变更时，视图无法自动更新

痛点：实际业务中需根据权限等场景动态修改列配置（如显示 / 隐藏列），传统组件需手动触发重新渲染，否则表单 / 表格无法同步更新，开发繁琐且易出错。
解决方案：通过 Vue 深度监听props.configs配置变化（配置immediate: true + deep: true），配置变更时即时更新表单列（formColumns）和表格列（tableColumns）数据，视图自动刷新，无需手动调用刷新方法，适配动态配置场景。

基础配置重复定义，原生属性透传不灵活

痛点：表格 marginTop、插槽开关等基础配置需在每个页面重复定义默认值，无意义代码冗余；原 UseElForm/UseElTable 的原生属性无法直接透传，需在封装组件中逐个声明，扩展成本高。
解决方案：为核心配置设置合理默认值（tableMarginTop默认 20px、useBottomSlot默认 false），减少无意义编码；模板中通过v-bind="$attrs"自动透传所有属性至 UseElForm 和 UseElTable，兼容原组件所有原生配置，无需额外声明即可扩展。

使用

重要说明：鉴于查询表单+表格页面开发的多样性与灵活性，难以在本文档中详尽演示UseCrudTable在各场景下的最佳实践。为此，我们特地从零精心打造了一套企业级中后台前端解决方案——该系统深度集成多种典型场景的表格开发模板，真正做到开箱即用！

本文档仅提供基础版使用演示与说明，若需体验完整查询表单+表格开发解决方案和解锁查询表单+表格开发实战技巧，诚邀您移步万有前端·iAdmin体验！

我们已在UseElConfigProvider组件文档集成了对UseCrudTable组件的基础使用演示，故不再此重复实现，请前往体验！

ComponentProps

import type { PropType } from 'vue'
import type { FormColumn } from '../UseElForm/types'
import type { TableColumn } from '../UseElTable/types'

type BaseConfigs = Omit<FormColumn, 'prop'> & Omit<TableColumn, 'prop'>

export interface Configs extends BaseConfigs {
  prop: string
  onlySearch?: boolean
  tableOrder?: number
}

/**
 * 组件props
 */
export default {
  /**
   * 配置项 必传
   * 1、configs是【formColumns】和【tableColumns】的统一配置入口
   * 2、configs在【formColumns】和【tableColumns】的配置基础上新增了【onlySearch】和【tableOrder】配置项用于兼容特殊应用场景
   */
  configs: {
    type: Array as PropType<Configs[]>,
    required: true
  },
  /**
   * 表格的marginTop值 默认20px
   */
  tableMarginTop: {
    type: String,
    default: '20px'
  },
  /**
   * 是否使用底部插槽 为true则不显示table
   */
  useBottomSlot: {
    type: Boolean,
    default: false
  }
}

Props && Expose

const props = defineProps(componentProps)

defineExpose({ uefRef })

UseCrudTable - Crud表格 ​

组件介绍 ​

核心亮点 ​

解决痛点 ​

使用 ​

ComponentProps ​

Props && Expose ​

UseCrudTable - Crud表格

组件介绍

核心亮点

解决痛点

使用

ComponentProps

Props && Expose