@cj-design/vue

CJ Design

基于 Vue3 + Element Plus 的业务组件库。

安装

npm install @cj-design/vue
# 或
pnpm add @cj-design/vue

依赖要求

快速开始

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import CjDesign from '@cj-design/vue';
import '@cj-design/vue/dist/index.css';

const app = createApp(App);
app.use(ElementPlus);
app.use(CjDesign);
app.mount('#app');

也可以按需引入：

import { CjTable, CjProTable, CjSearch, CjUpload } from '@cj-design/vue';

组件文档

CjProTable 高级表格组件

集成 CjSearch + CjTable 的高级表格组件，通过统一的列配置同时生成搜索表单和数据表格，内置列设置（拖拽排序）、刷新等工具栏功能。

Props

继承 CjTable 的所有 Props（columns 类型升级为 CjProTableColumnProps[]），额外新增：

CjProTableColumnProps 等同于 CjSearchColumnProps，即在 CjTableColumnProps 基础上增加了 search 字段。
只有配置了 search 的列才会出现在搜索表单中。

CjProTableToolbarRightValue

type CjProTableToolbarRightType = 'refresh' | 'setting';

// false 隐藏全部，true 显示全部，数组指定显示哪些
type CjProTableToolbarRightValue =
  | boolean
  | CjProTableToolbarRightType[];

CjProTableColumnProps

interface CjProTableColumnProps extends CjTableColumnProps {
  search?: CjSearchConfigProps;
}

Events

Expose Methods

Slots

列设置功能

内置列设置弹窗，支持：

• 勾选/取消列的显示隐藏
• 拖拽排序调整列顺序
• 全选/清除快捷操作
• 重置为初始状态

通过 toolbarRight 控制显示：

// 显示全部工具栏按钮（默认）
toolbarRight: true

// 仅显示刷新按钮
toolbarRight: ['refresh']

// 仅显示列设置按钮
toolbarRight: ['setting']

// 隐藏全部工具栏按钮
toolbarRight: false

基本用法

<template>
  <CjProTable :columns="columns" :request-api="fetchList">
    <template #toolbar-left>
      <el-button type="primary" @click="handleAdd">新增</el-button>
    </template>
    <template #action="{ row }">
      <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
      <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
    </template>
  </CjProTable>
</template>

<script setup lang="ts">
import { CjProTable } from '@cj-design/vue';
import type { CjProTableColumnProps, CjProTableRequestApi } from '@cj-design/vue';

const columns: CjProTableColumnProps[] = [
  {
    prop: 'name',
    label: '姓名',
    search: { type: 'el-input' },
  },
  {
    prop: 'status',
    label: '状态',
    valueEnum: [
      { label: '启用', value: 1 },
      { label: '禁用', value: 0 },
    ],
    search: { type: 'el-select' },
  },
  {
    prop: 'createTime',
    label: '创建时间',
    props: { width: 180 },
  },
  {
    prop: 'action',
    label: '操作',
    props: { width: 150, fixed: 'right' },
  },
];

const fetchList: CjProTableRequestApi = async (params) => {
  const res = await fetch(`/api/list?page=${params.current}&size=${params.pageSize}`);
  return res.json();
};

const handleAdd = () => console.log('新增');
const handleEdit = (row: any) => console.log('编辑', row);
const handleDelete = (row: any) => console.log('删除', row);
</script>

CjSearch 搜索表单组件

基于 el-form 的搜索表单组件，支持通过列配置动态生成搜索表单，支持 Grid 布局。

Props

CjSearchColumnProps

继承自 CjTableColumnProps，新增 search 配置项：

interface CjSearchColumnProps extends CjTableColumnProps {
  search?: CjSearchConfigProps;
}

CjSearchConfigProps

CjSearchValueEnumItem

interface CjSearchValueEnumItem {
  label: string;
  value: any;
  disabled?: boolean;
  children?: CjSearchValueEnumItem[];
}

Events

Expose Methods

基本用法

<template>
  <CjSearch v-model="searchParams" :columns="columns" @search="onSearch" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { CjSearch } from '@cj-design/vue';
import type { CjSearchColumnProps } from '@cj-design/vue';

const searchParams = ref({});

const columns: CjSearchColumnProps[] = [
  {
    prop: 'name',
    label: '姓名',
    search: { type: 'el-input' },
  },
  {
    prop: 'status',
    label: '状态',
    valueEnum: [
      { label: '启用', value: 1 },
      { label: '禁用', value: 0 },
    ],
    search: { type: 'el-select' },
  },
  {
    prop: 'date',
    label: '日期',
    search: { type: 'el-date-picker', props: { type: 'daterange' }, span: 2 },
  },
];

const onSearch = (params: Record<string, any>) => {
  console.log('搜索参数', params);
};
</script>

CjTable 表格组件

基于 el-table + el-pagination 封装的表格组件，支持自动分页请求、列枚举映射、自定义列插槽。

Props

CjTableColumnProps

请求相关类型

// 请求参数
interface CjTableRequestParams {
  current: number;
  pageSize: number;
  [key: string]: any;
}

// 响应数据体（兼容 list / records 两种格式）
interface CjTableRequestData<T = any> {
  list?: T[];
  records?: T[];
  total: number;
}

// 响应结果
interface CjTableRequestResult<T = any> {
  data: CjTableRequestData<T>;
  success?: boolean;
}

// 简化版请求 API
type CjTableRequestApi<T = any> = (
  params: CjTableRequestParams,
) => Promise<CjTableRequestResult<T>>;

// ProTable 风格请求函数
type CjTableRequestFunction<T = any> = (
  params: CjTableRequestParams & Record<string, any>,
  sort?: Record<string, 'ascend' | 'descend'>,
  filter?: Record<string, any>,
) => Promise<CjTableRequestResult<T>>;

Events

Expose Methods

Slots

基本用法

<template>
  <CjTable :columns="columns" :request-api="fetchList">
    <template #status="{ row }">
      <el-tag :type="row.status === 1 ? 'success' : 'danger'">
        {{ row.status === 1 ? '启用' : '禁用' }}
      </el-tag>
    </template>
    <template #action="{ row }">
      <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
    </template>
  </CjTable>
</template>

<script setup lang="ts">
import { CjTable } from '@cj-design/vue';
import type { CjTableColumnProps, CjTableRequestApi } from '@cj-design/vue';

const columns: CjTableColumnProps[] = [
  { prop: 'name', label: '姓名' },
  {
    prop: 'status',
    label: '状态',
    valueEnum: [
      { label: '启用', value: 1 },
      { label: '禁用', value: 0 },
    ],
  },
  { prop: 'action', label: '操作', props: { width: 150, fixed: 'right' } },
];

const fetchList: CjTableRequestApi = async (params) => {
  const res = await fetch(`/api/list?page=${params.current}&size=${params.pageSize}`);
  return res.json(); // { data: { list: [], total: 0 } }
};

const handleEdit = (row: any) => {
  console.log('编辑', row);
};
</script>

CjUpload 上传组件

基于 el-upload 封装的文件上传组件，提供简化的 API。

Props

Events

基本用法

<template>
  <CjUpload
    action="/api/upload"
    :headers="{ Authorization: 'Bearer token' }"
    tip="仅支持 jpg/png 文件，大小不超过 2MB"
    @success="onSuccess"
  />
</template>

<script setup lang="ts">
import { CjUpload } from '@cj-design/vue';

const onSuccess = (response: any, file: any) => {
  console.log('上传成功', response, file);
};
</script>

License

MIT