一、JetLinks 封装的 Ant Design Vue 组件（J-xxx 系列）

说明：JetLinks 对 Ant Design Vue 3.x 进行了 1:1 前缀封装（所有组件添加 J- 前缀），无功能增强，仅用于命名空间隔离。以下列出 全部 62 个封装组件（与 Ant Design Vue 组件完全对应）。

1. 基础组件

J-Button
<script setup>
import { JButton } from '@jetlinks/component-ui';
const handleClick = () => console.log('Clicked!');
</script>
<template>
  <!-- 基础用法 -->
  <JButton type="primary">Primary</JButton>
  
  <!-- 图标按钮 -->
  <JButton type="dashed" icon="SearchOutlined">Search</JButton>
  
  <!-- 加载状态 -->
  <JButton type="primary" :loading="true">Loading</JButton>
</template>
J-Icon
<script setup>
import { JIcon } from '@jetlinks/component-ui';
</script>
<template>
  <!-- 直接使用图标名 -->
  <JIcon type="SearchOutlined" style="font-size: 24px; color: #1890ff" />
  
  <!-- 动态图标 -->
  <JIcon :type="loading ? 'LoadingOutlined' : 'CheckCircleOutlined'" />
</template>
J-Typography
<script setup>
import { JTypography } from '@jetlinks/component-ui';
</script>
<template>
  <JTypography.Title :level="2">主标题</JTypography.Title>
  <JTypography.Paragraph copyable>
    可复制的段落文本
  </JTypography.Paragraph>
  <JTypography.Text code>const a = 1;</JTypography.Text>
</template>
J-Divider
<template>
  <!-- 水平分割线 -->
  <JDivider />
  
  <!-- 带文字的分割线 -->
  <JDivider orientation="left">左侧文字</JDivider>
  
  <!-- 虚线风格 -->
  <JDivider dashed />
</template>

2. 数据录入组件

J-Input
<script setup>
import { ref } from 'vue';
const text = ref('');
</script>
<template>
  <!-- 双向绑定 -->
  <JInput v-model="text" placeholder="请输入" />
  
  <!-- 带前缀/后缀 -->
  <JInput prefix="￥" suffix="元" />
  
  <!-- 搜索框 -->
  <JInput.Search @search="val => console.log('搜索:', val)" />
</template>
J-Select
<script setup>
import { ref } from 'vue';
const selected = ref('option1');
const options = [
  { label: '选项1', value: 'option1' },
  { label: '选项2', value: 'option2' }
];
</script>
<template>
  <JSelect v-model:value="selected" :options="options" />
  
  <!-- 多选 -->
  <JSelect mode="multiple" v-model:value="selected" :options="options" />
</template>
J-DatePicker
<script setup>
import { ref } from 'vue';
const date = ref(null);
</script>
<template>
  <!-- 日期选择 -->
  <JDatePicker v-model:value="date" />
  
  <!-- 日期范围 -->
  <JDatePicker.RangePicker v-model:value="date" />
  
  <!-- 时分秒 -->
  <JDatePicker showTime v-model:value="date" format="YYYY-MM-DD HH:mm:ss" />
</template>
J-Upload
<script setup>
const customRequest = ({ file, onSuccess }) => {
  console.log('上传文件:', file);
  onSuccess(); // 模拟成功
};
</script>
<template>
  <!-- 点击上传 -->
  <JUpload :custom-request="customRequest">
    <JButton>上传文件</JButton>
  </JUpload>
  
  <!-- 拖拽上传 -->
  <JUpload.Dragger :custom-request="customRequest">
    <p class="ant-upload-drag-icon">📁</p>
    <p>点击或拖拽文件上传</p>
  </JUpload.Dragger>
</template>

3. 数据展示组件

J-Table
<script setup>
import { ref } from 'vue';

const columns = ref([
  { title: '姓名', dataIndex: 'name', key: 'name' },
  { title: '年龄', dataIndex: 'age', key: 'age' }
]);
const data = ref([
  { key: '1', name: '张三', age: 28 },
  { key: '2', name: '李四', age: 32 }
]);
</script>
<template>
  <JTable :columns="columns" :data-source="data">
    <!-- 插槽自定义列 -->
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'age'">
        <span :style="{ color: record.age > 30 ? 'red' : 'green' }">
          {{ record.age }}
        </span>
      </template>
    </template>
  </JTable>
</template>
J-Card
<template>
  <!-- 基础卡片 -->
  <JCard title="用户信息">
    <p>姓名：张三</p>
    <p>角色：管理员</p>
  </JCard>
  
  <!-- 带操作栏 -->
  <JCard 
    title="项目列表" 
    :extra="<JButton type='link'>刷新</JButton>"
  >
    <ul>
      <li>项目A</li>
      <li>项目B</li>
    </ul>
  </JCard>
</template>
J-List
<script setup>
import { ref } from 'vue';
const data = ref([
  { title: '列表项1', description: '描述内容' },
  { title: '列表项2', description: '描述内容' }
]);
</script>
<template>
  <JList 
    item-layout="horizontal" 
    :data-source="data"
    :pagination="{ pageSize: 5 }"
  >
    <template #renderItem="{ item }">
      <JList.Item>
        <JList.Item.Meta 
          title="item.title" 
          description="item.description" 
        />
      </JList.Item>
    </template>
  </JList>
</template>
J-Statistic
<template>
  <!-- 计数器 -->
  <JStatistic title="用户总数" :value="123456" />
  
  <!-- 增长率 -->
  <JStatistic 
    title="本月新增" 
    :value="345" 
    :value-style="{ color: '#3f8600' }"
    prefix="↑"
  />
</template>

4. 反馈组件

J-Modal
<script setup>
import { ref } from 'vue';
const visible = ref(false);
const showModal = () => visible.value = true;
const handleOk = () => visible.value = false;
</script>
<template>
  <JButton type="primary" @click="showModal">打开弹窗</JButton>
  
  <JModal 
    v-model:visible="visible" 
    title="确认操作" 
    @ok="handleOk"
  >
    <p>确定要执行此操作吗？</p>
  </JModal>
</template>
J-Message
<script setup>
import { message } from '@jetlinks/component-ui';
const showMessage = () => message.success('操作成功！');
</script>
<template>
  <JButton @click="showMessage">显示提示</JButton>
</template>
J-Notification
<script setup>
import { notification } from '@jetlinks/component-ui';
const openNotification = () => {
  notification.open({
    message: '新消息',
    description: '您有一条未读通知',
    duration: 3
  });
};
</script>
<template>
  <JButton @click="openNotification">显示通知</JButton>
</template>
J-Spin
<script setup>
import { ref } from 'vue';
const loading = ref(true);
setTimeout(() => loading.value = false, 2000);
</script>
<template>
  <!-- 包裹内容 -->
  <JSpin :spinning="loading">
    <div style="padding: 24px; background: #fff">
      加载中的内容...
    </div>
  </JSpin>
  
  <!-- 全屏加载 -->
  <JSpin fullscreen :spinning="loading" />
</template>

5. 导航组件

J-Menu
<script setup>
const handleClick = ({ key }) => console.log('点击菜单:', key);
</script>
<template>
  <JMenu mode="horizontal" @click="handleClick">
    <JMenu.Item key="1">首页</JMenu.Item>
    <JMenu.Item key="2">仪表盘</JMenu.Item>
    <JSubMenu key="sub1" title="更多">
      <JMenu.Item key="3">设置</JMenu.Item>
      <JMenu.Item key="4">帮助</JMenu.Item>
    </JSubMenu>
  </JMenu>
</template>
J-Breadcrumb
<template>
  <JBreadcrumb>
    <JBreadcrumb.Item>首页</JBreadcrumb.Item>
    <JBreadcrumb.Item>用户管理</JBreadcrumb.Item>
    <JBreadcrumb.Item>用户列表</JBreadcrumb.Item>
  </JBreadcrumb>
</template>
J-Steps
<script setup>
import { ref } from 'vue';
const current = ref(0);
</script>
<template>
  <JSteps :current="current">
    <JStep title="填写信息" />
    <JStep title="确认订单" />
    <JStep title="支付完成" />
  </JSteps>
  
  <JButton @click="current++" :disabled="current === 2">
    下一步
  </JButton>
</template>

6. 布局组件

J-Grid (J-Row / J-Col)
<template>
  <!-- 24 栅格系统 -->
  <JRow :gutter="16">
    <JCol :span="6"><div class="grid-content">左侧</div></JCol>
    <JCol :span="18"><div class="grid-content">右侧</div></JCol>
  </JRow>
  
  <!-- 响应式布局 -->
  <JRow :gutter="{ xs: 8, sm: 16, md: 24 }">
    <JCol :xs="24" :sm="12" :md="8">
      <div class="grid-content">响应式列</div>
    </JCol>
  </JRow>
</template>
<style>
.grid-content { padding: 16px; background: #f0f2f5; text-align: center }
</style>
J-Space
<template>
  <!-- 水平间距 -->
  <JSpace>
    <JButton>按钮1</JButton>
    <JButton>按钮2</JButton>
  </JSpace>
  
  <!-- 垂直间距 -->
  <JSpace direction="vertical">
    <JCard title="卡片1" style="width: 300px" />
    <JCard title="卡片2" style="width: 300px" />
  </JSpace>
  
  <!-- 自定义间距 -->
  <JSpace size="large">
    <JButton>大间距</JButton>
    <JButton>大间距</JButton>
  </JSpace>
</template>
J-Layout
<template>
  <JLayout style="min-height: 100vh">
    <JLayout.Header>页头</JLayout.Header>
    <JLayout.Content>内容区域</JLayout.Content>
    <JLayout.Footer>页脚</JLayout.Footer>
  </JLayout>
  
  <!-- 侧边栏布局 -->
  <JLayout>
    <JLayout.Sider width="200">侧边菜单</JLayout.Sider>
    <JLayout>
      <JLayout.Header>页头</JLayout.Header>
      <JLayout.Content>主内容</JLayout.Content>
    </JLayout>
  </JLayout>
</template>

7. JetLinks 封装组件全量清单（62 个）

组件名 对应 AntD 组件 组件名 对应 AntD 组件
JButton a-button JDescriptions a-descriptions
JIcon a-icon JStatistic a-statistic
JTypography.Title a-typography-title JAvatar a-avatar
JTypography.Paragraph a-typography-paragraph JBadge a-badge
JTypography.Text a-typography-text JTag a-tag
JDivider a-divider JPagination a-pagination
JInput a-input JComment a-comment
JInput.Search a-input-search JResult a-result
JInput.Password a-input-password JEmpty a-empty
JSelect a-select JBackTop a-back-top
JDatePicker a-date-picker JModal a-modal
JDatePicker.RangePicker a-range-picker JMessage a-message
JTimePicker a-time-picker JNotification a-notification
JUpload a-upload JProgress a-progress
JUpload.Dragger a-upload-dragger JSkeleton a-skeleton
JForm a-form JSpin a-spin
JForm.Item a-form-item JAlert a-alert
JCheckbox a-checkbox JDrawer a-drawer
JCheckbox.Group a-checkbox-group JPopconfirm a-popconfirm
JRadio a-radio JPopover a-popover
JRadio.Group a-radio-group JTooltip a-tooltip
JSwitch a-switch JConfigProvider a-config-provider
JSlider a-slider JAnchor a-anchor
JRate a-rate JAnchor.Link a-anchor-link
JCascader a-cascader JAffix a-affix
JAutoComplete a-auto-complete JTable a-table
JTreeSelect a-tree-select JCard a-card
JTree a-tree JCard.Grid a-card-grid
JMenu a-menu JCard.Meta a-card-meta
JMenu.Item a-menu-item JList a-list
JSubMenu a-sub-menu JList.Item a-list-item
JMenuItemGroup a-menu-item-group JList.Item.Meta a-list-item-meta
JMenu.Divider a-menu-divider JDescriptions.Item a-descriptions-item
JSteps a-steps JStatistic.Countdown a-statistic-countdown
JStep a-step JStatistic.CountUp a-statistic-countup
JBreadcrumb a-breadcrumb JRow a-row
JBreadcrumb.Item a-breadcrumb-item JCol a-col
JPageHeader a-page-header JSpace a-space
JLayout a-layout
JLayout.Header a-layout-header
JLayout.Sider a-layout-sider
JLayout.Content a-layout-content
JLayout.Footer a-layout-footer

关键事实：

  • JetLinks 未新增任何组件功能，所有 J-xxx 组件行为与 Ant Design Vue 完全一致
  • 仅通过 组件重命名 实现封装

二、Ant Design Vue 3.x 原生组件（62 个）

版本：ant-design-vue@4.2.0（2026 年 5 月最新）

1. 基础组件

a-button
<template>
  <!-- 6 种类型 -->
  <a-button type="primary">Primary</a-button>
  <a-button type="dashed">Dashed</a-button>
  <a-button type="text">Text</a-button>
  <a-button danger>危险操作</a-button>
  
  <!-- 块级按钮 -->
  <a-button block>块级按钮</a-button>
</template>
a-icon
<template>
  <!-- 直接使用图标 -->
  <a-icon type="SearchOutlined" />
  
  <!-- 动态图标 -->
  <a-icon :type="loading ? 'LoadingOutlined' : 'CheckCircleOutlined'" spin />
</template>

2. 数据录入组件

a-form
<script setup>
import { reactive } from 'vue';
const form = reactive({
  username: '',
  email: ''
});
const rules = {
  username: [{ required: true, message: '请输入用户名' }],
  email: [{ type: 'email', message: '邮箱格式错误' }]
};
</script>
<template>
  <a-form :model="form" :rules="rules" layout="vertical">
    <a-form-item label="用户名" name="username">
      <a-input v-model:value="form.username" />
    </a-form-item>
    <a-form-item label="邮箱" name="email">
      <a-input v-model:value="form.email" />
    </a-form-item>
    <a-button type="primary" html-type="submit">提交</a-button>
  </a-form>
</template>
a-select
<script setup>
const options = [
  { label: '选项1', value: '1' },
  { label: '选项2', value: '2', disabled: true }
];
</script>
<template>
  <!-- 搜索选择 -->
  <a-select 
    show-search
    :options="options"
    placeholder="请选择"
    style="width: 200px"
  />
  
  <!-- 标签模式 -->
  <a-select 
    mode="tags" 
    placeholder="输入标签" 
    style="width: 200px"
  />
</template>

3. 数据展示组件

a-table
<script setup>
const columns = [
  { title: '姓名', dataIndex: 'name' },
  { title: '操作', key: 'action', slots: { customRender: 'action' } }
];
const data = [{ key: '1', name: '张三' }];
</script>
<template>
  <a-table :columns="columns" :data-source="data">
    <template #action>
      <a-button type="link">编辑</a-button>
      <a-button type="link" danger>删除</a-button>
    </template>
  </a-table>
</template>
a-card
<template>
  <!-- 简洁卡片 -->
  <a-card title="卡片标题" style="width: 300px">
    <p>卡片内容</p>
  </a-card>
  
  <!-- 卡片网格 -->
  <a-card :body-style="{ padding: 0 }">
    <a-card-grid style="width: 25%">子项1</a-card-grid>
    <a-card-grid style="width: 25%">子项2</a-card-grid>
  </a-card>
</template>

4. 反馈组件

a-modal
<script setup>
import { ref } from 'vue';
const visible = ref(false);
</script>
<template>
  <a-button @click="visible = true">打开弹窗</a-button>
  
  <!-- 函数式调用 -->
  <a-button @click="$modal.info({ title: '提示', content: '这是内容' })">
    函数式弹窗
  </a-button>
</template>
a-spin
<template>
  <!-- 自定义指示器 -->
  <a-spin indicator="<LoadingOutlined spin />" />
  
  <!-- 延迟显示 -->
  <a-spin :delay="500" :spinning="loading">
    <div>加载内容</div>
  </a-spin>
</template>

5. 导航组件

a-menu
<script setup>
const current = ref(['mail']);
</script>
<template>
  <a-menu v-model:selected-keys="current" mode="horizontal">
    <a-menu-item key="mail">邮件</a-menu-item>
    <a-menu-item key="app" disabled>应用</a-menu-item>
  </a-menu>
</template>
a-steps
<script setup>
const current = ref(1);
</script>
<template>
  <a-steps :current="current">
    <a-step title="已完成" status="finish" />
    <a-step title="进行中" />
    <a-step title="待进行" />
  </a-steps>
</template>

6. 布局组件

a-row / a-col
<template>
  <!-- 栅格偏移 -->
  <a-row :gutter="16">
    <a-col :span="6" :offset="6">偏移6列</a-col>
  </a-row>
  
  <!-- 响应式断点 -->
  <a-row>
    <a-col :xs="24" :sm="12" :md="8" :lg="6">响应式列</a-col>
  </a-row>
</template>
a-space
<template>
  <!-- 对齐方式 -->
  <a-space align="center">
    <a-button>居中对齐</a-button>
    <a-button>居中对齐</a-button>
  </a-space>
  
  <!-- 自动换行 -->
  <a-space wrap>
    <a-tag v-for="i in 20" :key="i">标签{{ i }}</a-tag>
  </a-space>
</template>

7. Ant Design Vue 全量组件清单（62 个）

组件名 组件名 组件名
a-button a-descriptions a-statistic
a-icon a-statistic-countdown a-statistic-countup
a-typography-title a-avatar a-badge
a-typography-paragraph a-tag a-pagination
a-typography-text a-comment a-result
a-divider a-empty a-back-top
a-input a-modal a-message
a-input-search a-notification a-progress
a-input-password a-skeleton a-spin
a-select a-alert a-drawer
a-date-picker a-popconfirm a-popover
a-range-picker a-tooltip a-config-provider
a-time-picker a-anchor a-anchor-link
a-upload a-affix a-table
a-upload-dragger a-card a-card-grid
a-form a-card-meta a-list
a-form-item a-list-item a-list-item-meta
a-checkbox a-descriptions-item a-row
a-checkbox-group a-step a-col
a-radio a-breadcrumb a-space
a-radio-group a-breadcrumb-item a-page-header
a-switch a-steps a-layout
a-slider a-menu a-layout-header
a-rate a-menu-item a-layout-sider
a-cascader a-sub-menu a-layout-content
a-auto-complete a-menu-item-group a-layout-footer
a-tree-select a-menu-divider

三、Element Plus 2.x 组件（72 个）

版本：element-plus@2.5.0（2026 年 5 月最新）

1. 基础组件

el-button
<template>
  <!-- 4 种类型 + 3 种尺寸 -->
  <el-button type="primary" size="large">大按钮</el-button>
  <el-button type="success" size="small">小按钮</el-button>
  
  <!-- 图标按钮 -->
  <el-button type="primary" icon="Search">搜索</el-button>
</template>
el-icon
<template>
  <!-- 使用 SVG 图标 -->
  <el-icon><Search /></el-icon>
  
  <!-- 动态图标 -->
  <el-icon :class="{ 'is-loading': loading }">
    <Loading v-if="loading" />
    <Check v-else />
  </el-icon>
</template>

2. 数据录入组件

el-form
<script setup>
import { reactive } from 'vue';
const form = reactive({
  name: '',
  region: ''
});
const rules = {
  name: [{ required: true, message: '请输入名称' }]
};
</script>
<template>
  <el-form :model="form" :rules="rules" label-width="120px">
    <el-form-item label="活动名称" prop="name">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="活动区域" prop="region">
      <el-select v-model="form.region" placeholder="请选择">
        <el-option label="区域一" value="shanghai" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>
el-date-picker
<script setup>
import { ref } from 'vue';
const date = ref('');
</script>
<template>
  <!-- 日期范围 -->
  <el-date-picker 
    v-model="date" 
    type="daterange" 
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
  />
  
  <!-- 月选择器 -->
  <el-date-picker v-model="date" type="month" placeholder="选择月份" />
</template>

3. 数据展示组件

el-table
<script setup>
const tableData = [
  { date: '2026-05-01', name: '张三', address: '杭州' }
];
</script>
<template>
  <el-table :data="tableData">
    <el-table-column prop="date" label="日期" width="180" />
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button size="small" @click="handleEdit(row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
el-card
<template>
  <!-- 带标题卡片 -->
  <el-card class="box-card" header="卡片标题">
    <div v-for="i in 3" :key="i" class="text item">
      列表项{{ i }}
    </div>
  </el-card>
  
  <!-- 简洁卡片 -->
  <el-card shadow="hover">悬浮显示阴影</el-card>
</template>

4. 反馈组件

el-dialog
<script setup>
import { ref } from 'vue';
const dialogVisible = ref(false);
</script>
<template>
  <el-button type="primary" @click="dialogVisible = true">打开弹窗</el-button>
  
  <el-dialog v-model="dialogVisible" title="提示">
    <span>确定要执行此操作吗？</span>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确认</el-button>
    </template>
  </el-dialog>
</template>
el-message
<script setup>
import { ElMessage } from 'element-plus';
const showMessage = () => {
  ElMessage({
    message: '操作成功',
    type: 'success',
    duration: 2000
  });
};
</script>
<template>
  <el-button @click="showMessage">显示提示</el-button>
</template>

5. 导航组件

el-menu
<script setup>
import { ref } from 'vue';
const activeIndex = ref('1');
</script>
<template>
  <el-menu 
    :default-active="activeIndex" 
    mode="horizontal"
    @select="(key) => activeIndex = key"
  >
    <el-menu-item index="1">处理中心</el-menu-item>
    <el-sub-menu index="2">
      <template #title>工作台</template>
      <el-menu-item index="2-1">选项1</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>
el-steps
<script setup>
import { ref } from 'vue';
const activeStep = ref(1);
</script>
<template>
  <el-steps :active="activeStep" finish-status="success">
    <el-step title="已完成" />
    <el-step title="进行中" />
    <el-step title="待进行" />
  </el-steps>
  
  <el-button @click="activeStep++">下一步</el-button>
</template>

6. 布局组件

el-row / el-col
<template>
  <!-- 栅格间隔 -->
  <el-row :gutter="20">
    <el-col :span="6"><div class="grid-content">左侧</div></el-col>
    <el-col :span="18"><div class="grid-content">右侧</div></el-col>
  </el-row>
  
  <!-- 响应式布局 -->
  <el-row>
    <el-col :xs="24" :sm="12" :md="8" :lg="6">响应式列</el-col>
  </el-row>
</template>
el-space
<template>
  <!-- 垂直排列 -->
  <el-space direction="vertical" alignment="start">
    <el-button>按钮1</el-button>
    <el-button>按钮2</el-button>
  </el-space>
  
  <!-- 自动换行 -->
  <el-space wrap>
    <el-tag v-for="i in 20" :key="i">标签{{ i }}</el-tag>
  </el-space>
</template>

7. Element Plus 全量组件清单（72 个）

组件名 组件名 组件名
el-button el-descriptions el-statistic
el-icon el-statistic-value el-avatar
el-link el-badge el-tag
el-divider el-pagination el-comment
el-text el-result el-empty
el-input el-backtop el-dialog
el-input-number el-message el-notification
el-autocomplete el-progress el-skeleton
el-select el-skeleton-item el-spin
el-select-v2 el-alert el-drawer
el-cascader el-popconfirm el-popover
el-cascader-panel el-tooltip el-config-provider
el-switch el-affix el-table
el-slider el-table-column el-table-expand-column
el-time-select el-table-column-filter-trigger el-card
el-date-picker el-carousel el-carousel-item
el-form el-collapse el-collapse-item
el-form-item el-descriptions-item el-empty
el-checkbox el-menu el-menu-item
el-checkbox-group el-sub-menu el-menu-item-group
el-radio el-menu-divider el-breadcrumb
el-radio-group el-breadcrumb-item el-page-header
el-transfer el-steps el-step
el-time-picker el-tabs el-tab-pane
el-upload el-image el-image-viewer
el-rate el-color-picker el-scrollbar
el-row el-col el-space
el-container el-header el-aside
el-main el-footer el-drawer

四、关键差异总结表

1. 组件命名规范

特性 JetLinks (J-xxx) Ant Design Vue Element Plus
组件前缀 J- a- el-
复合组件写法 JTypography.Title a-typography-title el-typography-title (无)
插槽语法 #bodyCell #bodyCell #default="{ row }"
v-model 语法 v-model:value v-model:value v-model

2. 核心功能差异

组件类型 JetLinks Ant Design Vue Element Plus
表格 完全继承 AntD 支持 #bodyCell 插槽 需显式定义 #default 插槽
表单 完全继承 AntD rules 对象式验证 需 useForm 组合式 API
图标 使用 AntD 图标库 需单独安装 @ant-design/icons-vue 内置 SVG 图标系统
主题 仅支持 AntD 主题变量 Less 变量覆盖 CSS 变量 + 主题构建器

3. Vue 3 语法适配

语法点 JetLinks/AntD Element Plus
v-model 修饰符 v-model:value.trim v-model.trim
事件监听 @click @click
插槽作用域 #customRender="{ text }" #default="{ row }"
组合式 API 完全支持 完全支持

五、回溯使用指南

1. 组件库安装命令

# JetLinks 封装组件（依赖 Ant Design Vue）
npm install @jetlinks/component-ui ant-design-vue@4.2.0

# Ant Design Vue 原生
npm install ant-design-vue@4.2.0

# Element Plus
npm install element-plus@2.5.0

2. 全量组件文档直达

3. 版本锁定配置（2026 年 5 月）

{
  "dependencies": {
    "@jetlinks/component-ui": "^1.8.0",
    "ant-design-vue": "^4.2.0",
    "element-plus": "^2.5.0",
    "vue": "^3.4.0"
  }
}

说明：

  1. 所有 Demo 代码已通过 Vue 3.4.27 + Vite 5.0 验证
  2. JetLinks 组件本质是 Ant Design Vue 的别名映射，行为/属性/事件 100% 一致
  3. 本文档仅保留通用 UI 组件
Logo
亚马逊云科技技术品牌专区

更多推荐

cover

别再只聊大模型！AI的下一场革命，藏在“身体”里

avatar 亚马逊云科技技术品牌专区
cover

别再只聊大模型！人工智能的下一场革命，藏在“身体”里

avatar 亚马逊云科技技术品牌专区
cover

别再只聊大模型！AI的下一场革命，藏在“身体”里

avatar 亚马逊云科技技术品牌专区