功能组件 · ElementPlus

核心 API 请查阅 功能组件-通用篇，本文档仅说明 ElementPlus 框架下的特化配置。

导入路径

import { $initHook } from '@jiess/plus/vue3';

ElementPlus 特化组件

Jiess 组件	ElementPlus 组件	说明
$Button	el-button	按钮
$Tag	el-tag	标签
$Divider	el-divider	分割线
$Badge	el-badge	徽章
$Tooltip	el-tooltip	工具提示
$Popover	el-popover	弹出框
$Collapse	el-collapse	折叠面板

ElementPlus 按钮类型

{
    $Button: {
        children: '操作',
        type: 'primary',      // '' / 'primary' / 'success' / 'warning' / 'danger' / 'info'
        size: 'default',      // 'large' / 'default' / 'small'
        plain: false,         // 朴素按钮
        round: false,         // 圆角按钮
        circle: false,        // 圆形按钮
        loading: false,       // 加载状态
        icon: Edit,           // 图标
    },
}

ElementPlus 标签类型

{
    $Tag: {
        children: '已审核',
        type: 'success',      // '' / 'success' / 'info' / 'warning' / 'danger'
        closable: true,
        effect: 'light',      // 'dark' / 'light' / 'plain'
        size: 'default',
    },
}

ElementPlus 功能组件示例

带状态的操作按钮

{
    $Space: {
        children: [
            { $Button: { children: '编辑', type: 'primary', onClick: edit } },
            { $Button: { children: '删除', type: 'danger', onClick: del } },
            {
                $Popover: {
                    content: '确认重置密码？',
                    trigger: 'click',
                    children: {
                        $Button: { children: '重置密码', type: 'warning' },
                    },
                },
            },
        ],
    },
}

实战示例

示例1：状态标签映射（枚举值 → 带颜色的 Tag）

// 将后端返回的状态值映射为带颜色的 Tag 标签
{
    $Tag: {
        children: '审核通过',
        type: 'success',
        effect: 'light',
        size: 'default',
    },
}

// 常用状态映射表（可在表格列 render 中使用）
const statusMap = {
    0: { text: '待审核', type: 'info' },
    1: { text: '审核通过', type: 'success' },
    2: { text: '审核拒绝', type: 'danger' },
    3: { text: '已发布', type: 'primary' },
};

// 在表格列中使用
$JiessTable({
    $fields: [
        {
            $label: '状态',
            $name: 'status',
            $TableField: {
                render(row) {
                    const cfg = statusMap[row.status] || { text: '未知', type: '' };
                    return (
                        <el-tag type={cfg.type} size="small">{cfg.text}</el-tag>
                    );
                },
            },
        },
    ],
});

示例2：表格操作列组合（按钮 + Popover 确认）

$JiessTable({
    $fields: [
        {
            $label: '操作',
            $TableField: {
                render(row) {
                    return (
                        <el-space>
                            <el-button type="primary" size="small" onClick={() => editRow(row)}>
                                编辑
                            </el-button>
                            <el-popover
                                title="确认操作"
                                trigger="click"
                                width={200}
                                v-slots={{
                                    reference: () => (
                                        <el-button type="danger" size="small">删除</el-button>
                                    ),
                                }}
                            >
                                <div style={{ marginBottom: '8px' }}>确定要删除 "{row.name}" 吗？</div>
                                <div style={{ textAlign: 'right' }}>
                                    <el-button size="small" onClick={() => popRef.hide()}>取消</el-button>
                                    <el-button type="danger" size="small" onClick={() => deleteRow(row)}>
                                        确认
                                    </el-button>
                                </div>
                            </el-popover>
                        </el-space>
                    );
                },
            },
        },
    ],
});

示例3：折叠面板展示（Collapse + 详情内容）

export default {
    $Collapse: {
        accordion: true,
        children: [
            {
                $CollapseItem: {
                    title: '基本信息',
                    name: '1',
                    children: {
                        // 内部可放表格、描述列表等任意内容
                        $JiessTable: {
                            data: [{ /* */ }],
                            // 或使用 $Descriptions
                        },
                    },
                },
            },
            {
                $CollapseItem: {
                    title: '关联订单',
                    name: '2',
                    children: {
                        $JiessTable: {
                            action: '/api/orders',
                            rowKey: 'id',
                            border: true,
                            $fields: [
                                { $label: '订单号', $name: 'orderNo', $width: 150 },
                                { $label: '金额', $name: 'amount', $width: 100 },
                                { $label: '状态', $name: 'status', $width: 80 },
                            ],
                        },
                    },
                },
            },
            {
                $CollapseItem: {
                    title: '操作日志',
                    name: '3',
                    children: {
                        // 时间线或日志列表
                    },
                },
            },
        ],
    },
};

注意事项

事项	说明
el-button 事件	onClick 透传为 @click
el-tooltip 内容	$TipText 组件封装了 el-tooltip / el-popover
el-collapse	通过 $Collapse + $CollapseItem 使用

下一步

• 功能组件-通用篇 — 跨框架通用组件 API