CondorTable

CondorTable 是一个功能全面的高级表格组件，集成了数据展示、搜索、分页、表单操作、列配置、导出等功能。基于 Naive UI 的数据表格，提供了丰富的自定义选项和扩展能力。

组件 Props

参数名	类型	默认值	说明
isTable	boolean	true	是否显示为表格模式，false时显示为列表模式
bordered	boolean	true	是否显示边框
striped	boolean	true	是否显示斑马纹
isPagination	boolean	true	是否显示分页
showSearch	boolean	true	是否显示搜索区域
header	Condor.Table.Header	() => ({ params: [] })	头部导航配置
buttons	('refresh' / 'add' / 'multi' / 'del')[]	() => ['refresh', 'add', 'del']	操作按钮配置
tools	('grid' / 'column' / 'search' / 'export')[]	() => ['grid', 'column', 'search', 'export']	工具按钮配置
config	Condor.Table.Config	-	必需 表格配置对象
scrollX	number / undefined	undefined	表格横向滚动宽度
colSpan	number	24	表单字段栅格列数
formLabelWidth	string	'100px'	表单标签宽度
defaultExpandAll	boolean	false	是否默认展开所有行
initSearchParams	Record<string, any>	() => ({})	初始搜索参数
renderExpandIcon	(row: Record<string, any>) => any	默认展开图标	自定义展开图标渲染函数

组件事件

组件通过 defineExpose 暴露以下方法：

方法名	说明	参数
setForm	设置表单数据	data: any - 要设置的数据
getTableData	获取表格数据	-
getCheckedRowKeys	获取选中的行键值	-

插槽

插槽名	说明	作用域参数
header	自定义头部区域	-
search	自定义搜索区域	-
buttons	自定义操作按钮区域	-
tools	自定义工具按钮区域	-
table	自定义表格区域	-
form-modal	自定义表单弹窗区域	-
form	自定义表单内容	-
form-item-$	自定义特定表单字段	{ form } - 当前表单数据

Column 配置示例

interface Column {
  key: string;                      // 字段键名
  title: string | Function;         // 列标题
  type?: string;                    // 列类型：'operate'、'selection'、'expand'等
  visible?: boolean;                // 是否显示
  checked?: boolean;                // 是否选中（列配置中）
  width?: number | string;          // 列宽度
  align?: 'left' | 'center' | 'right'; // 对齐方式
  render?: Function;                // 自定义渲染函数
  component?: {                    // 组件配置（用于表单）
    name: string;
    props?: Record<string, any>;
  };
  buttons?: string[] | Function;    // 操作按钮配置
  value?: any;                     // 默认值
  // ... 其他属性
}

基础用法

<script setup lang="ts">
import { ref } from 'vue';
import { $t } from '@/locales';

const config = ref<Condor.Table.Config>({
  urls: {
    index: '/core/system-test/index',
    add: '/core/system-test/add',
    edit: '/core/system-test/edit',
    del: '/core/system-test/del'
  },
  rowKey(row) {
    return row.id;
  },
  columns: [
    {
      title: 'ID',
      key: 'id',
      form: false,
      operator: false,
      visible: false
    },
    {
      title() {
        return $t('system.test.name');
      },
      key: 'name',
      operator: 'like'
    },
    {
      title() {
        return $t('system.test.target');
      },
      key: 'target',
      operator: false,
      visible: false,
      component: {
        props: {
          type: 'textarea',
          rows: 4
        }
      }
    },
    {
      title() {
        return $t('system.test.title');
      },
      key: 'title',
      operator: 'like'
    },
    {
      title() {
        return $t('system.test.content');
      },
      key: 'content',
      operator: false,
      visible: false,
      component: {
        name: 'condor-editor'
      }
    },
    {
      title() {
        return $t('system.test.image');
      },
      key: 'image',
      operator: false,
      component: {
        name: 'condor-upload',
        props: {
          max: 1,
          multiple: false
        }
      }
    },
    {
      title() {
        return $t('system.test.images');
      },
      key: 'images',
      operator: false,
      component: {
        name: 'condor-upload',
        props: {
          max: 9,
          multiple: true
        }
      }
    },
    {
      title() {
        return $t('system.test.attachfile');
      },
      key: 'attachfile',
      operator: false,
      component: {
        name: 'condor-upload',
        props: {
          max: 1,
          multiple: false
        }
      }
    },
    {
      title() {
        return $t('system.test.keywords');
      },
      key: 'keywords',
      operator: false,
      component: {
        props: {
          type: 'textarea',
          rows: 4
        }
      }
    },
    {
      title() {
        return $t('system.test.description');
      },
      key: 'description',
      operator: false,
      component: {
        props: {
          type: 'textarea',
          rows: 4
        }
      }
    },
    {
      title() {
        return $t('system.test.price');
      },
      key: 'price',
      component: {
        name: 'n-input-number',
        props: {
          showButton: false
        }
      }
    },
    {
      title() {
        return $t('system.test.views');
      },
      key: 'views',
      component: {
        name: 'n-input-number',
        props: {
          showButton: false
        }
      }
    },
    {
      title() {
        return $t('system.test.activitytime');
      },
      key: 'activitytime',
      operator: 'between',
      render: 'datetime',
      component: {
        name: 'n-date-picker',
        props: {
          type: 'datetime'
        }
      }
    },
    {
      title() {
        return $t('system.test.refreshtime');
      },
      key: 'refreshtime',
      operator: 'between',
      render: 'datetime',
      component: {
        name: 'n-date-picker',
        props: {
          type: 'datetime'
        }
      }
    },
    {
      title() {
        return $t('condor.common.createtime');
      },
      key: 'createtime',
      form: false,
      operator: 'between'
    },
    {
      title() {
        return $t('condor.common.updatetime');
      },
      key: 'updatetime',
      form: false,
      operator: false,
      visible: false
    },
    {
      type: 'operate',
      title() {
        return $t('common.operate');
      },
      width: 120,
      key: 'operation',
      buttons: ['edit', 'del']
    }
  ]
});
</script>

<template>
  <div>
    <CondorTable :config="config" />
  </div>
</template>