| 输入字段 |
说明 |
生成代码 |
| info | 普通类型的消息提示 (ElMessage) |
ElMessage.info({
message: '',
showClose: true,
});
|
| success | 成功类型的消息提示 (ElMessage) |
ElMessage.success({
message: '',
showClose: true,
});
|
| warning | 警告类型的消息提示 (ElMessage) |
ElMessage.warning({
message: '',
showClose: true,
});
|
| error | 错误类型的消息提示 (ElMessage) |
ElMessage.error({
message: '',
showClose: true,
});
|
| alert | alert消息弹出框 (ElMessageBox) |
ElMessageBox.alert('内容', '标题', {
confirmButtonText: '确定',
callback: action => {
if (action === 'confirm') {
}
}
});
|
| confirm | confirm消息弹出框 (ElMessageBox) |
ElMessageBox.confirm('内容', '标题', {
{
confirmButtonText: '确定'
cancelButtonText: '取消'
}
}).then(() => {
}).catch(() => {
});
|
| prompt | prompt消息弹出框 (ElMessageBox) |
ElMessageBox.prompt('内容', '标题', {
{
confirmButtonText: '确定'
cancelButtonText: '取消'
}
}).then(() => {
}).catch(() => {
});
|
| info | 普通类型的消息通知 (ElNotification) |
ElNotification.info({
title: '温馨提示',
message: '',
});
|
| success | 成功类型的消息通知 (ElNotification) |
ElNotification.success({
title: '成功',
message: '',
});
|
| warning | 警告类型的消息通知 (ElNotification) |
ElNotification.warning({
title: '警告',
message: '',
});
|
| error | 错误类型的消息通知 (ElNotification) |
ElNotification.error({
title: '错误',
message: '',
});
|
| 输入字段 |
说明 |
生成代码 |
| template | 模板 |
<template>
</template>
|
| slot | 插槽 |
<slot name=""></slot>
|
| el-button | 按钮组件 |
<el-button type="" @click=""></el-button>
|
| el-container | 布局组件 |
<el-container>
<el-aside width="200px">Sider</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>main</el-main>
<el-footer>footer</el-footer>
</el-container>
</el-container>
|
| el-confirm | 确认按钮组件 |
<el-button type="primary" @click="confirm()" :loading="confirmLoading">确认</el-button>
|
| el-cancel | 取消按钮组件 |
<el-button type="default" @click="cancel()">取消</el-button>
|
| el-link | 路由跳转组件 |
<el-link type="" href="" target="_blank"></el-link>
|
| el-scrollbar | 滚动条组件 |
<el-scrollbar height="">
</el-scrollbar>
|
| el-space | 间距组件 |
<el-space wrap>
</el-space>
|
| el-config-provider | 间距组件 |
<el-config-provider :locale="">
</el-config-provider>
|
| el-autocomplete | 自动补全输入框组件 |
<el-autocomplete
v-model="state"
:fetch-suggestions="querySearch"
clearable
@select="handleSelect"
></el-autocomplete>
|
| el-icon | 图标组件 |
<el-icon :size="" :color=""> </el-icon>
|
| el-tabs | 标签页组件 |
<el-tabs v-model="activeKey">
<el-tab-pane key="1" tab=""></el-tab-pane>
</el-tabs>
|
| el-tab-pane | 面包屑子组件 |
<el-tab-pane key="" tab=""> </el-tab-pane>
|
| el-aside | 布局侧边栏组件 |
<el-aside>aside</el-aside>
|
| el-header | 布局顶部组件 |
<el-header>header</el-header>
|
| el-main | 布局内容组件 |
<el-main>main</el-main>
|
| el-footer | 布局底部组件 |
<el-footer>footer</el-footer>
|
| el-breadcrumb | 面包屑组件 |
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }"></el-breadcrumb-item>
<el-breadcrumb-item></el-breadcrumb-item>
<el-breadcrumb-item></el-breadcrumb-item>
</el-breadcrumb>
|
| el-breadcrumb-item | 面包屑子组件 |
<el-breadcrumb-item></el-breadcrumb-item>
|
| el-menu | 菜单组件 |
<el-menu :default-active="current" mode="horizontal">
<el-menu-item index="1"></el-menu-item>
<el-sub-menu>
<template #title>Workspace</template>
<el-menu-item index="1"></el-menu-item>
<el-menu-item index="2"></el-menu-item>
</el-sub-menu>
</el-menu>
|
| el-sub-menu | 子菜单组件 |
<el-sub-menu>
<template #title>Workspace</template>
<el-menu-item index="1"></el-menu-item>
<el-menu-item index="2"></el-menu-item>
</el-sub-menu>
|
| el-menu-item | 菜单子组件 |
<el-menu-item index="1"></el-menu-item>
|
| el-timeline | 时间轴组件 |
<el-timeline>
<el-timeline-item center color="" size="normal" type="primary"></el-timeline-item>
<el-timeline-item></el-timeline-item>
</el-timeline>
|
| el-timeline-item | 时间轴子组件 |
<el-timeline-item color=""></el-timeline-item>
|
| el-tour | 漫游式引导 |
<el-tour v-model="open" @finish="finish">
<el-tour-step :target="ref1?.$el" title="Upload File">
<div>Put you files here.</div>
</el-tour-step>
<el-tour-step
:target="ref2?.$el"
title="Save"
description="Save your changes"
></el-tour-step>
<el-tour-step
:target="ref3?.$el"
title="Other Actions"
description="Click to see other"
></el-tour-step>
</el-tour>
|
| el-tour-step | 漫游式引导步骤 |
<el-tour-step :target="ref1?.$el" title="Upload File">
<div>Put you files here.</div>
</el-tour-step>
|
| el-collapse | 折叠面板组件 |
<el-collapse v-model="activeKey">
<el-collapse-item name="1" title=""></el-collapse-item>
</el-collapse>
|
| el-collapse-item | 折叠面板子组件 |
<el-collapse-item name="" title=""></el-collapse-item>
|
| el-descriptions | 描述列表组件 |
<el-descriptions title="">
<el-descriptions-item label=""></el-descriptions-item>
</el-descriptions>
|
| el-descriptions-item | 描述列表子组件 |
<el-descriptions-item label=""></el-descriptions-item>
|
| el-result | 结果组件 |
<el-result
icon=""
title=""
sub-title=""
>
<template #extra>
</template>
</el-result>
|
| el-empty | 空状态组件 |
<el-empty description="" image=""></el-empty>
|
| el-dropdown | 下拉菜单父组件 |
<el-dropdown>
<span></span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>
</el-dropdown-item>
<el-dropdown-item disabled>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
|
| el-dropdown-menu | 下拉菜单子组件 |
<el-dropdown-menu>
<el-dropdown-item>
</el-dropdown-item>
<el-dropdown-item disabled>
</el-dropdown-item>
</el-dropdown-menu>
|
| el-dropdown-item | 下拉菜单子组件 |
<el-dropdown-item>
</el-dropdown-item>
|
| el-pagination | 分页组件 |
<el-pagination
background
:total="total"
:page-size="40"
:page-sizes="[20, 40, 60, 80, 100]"
layout="total, sizes, prev, pager, next, jumper"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
></el-pagination>
|
| el-checkbox-group | 多选框 el-checkbox形式编码 |
<el-checkbox-group v-model="value">
<el-checkbox :label="label" :value="value">
</el-checkbox>
<el-checkbox :label="label" :value="value">
</el-checkbox>
</el-checkbox-group>
|
| el-checkbox | 复选框组件 |
<el-checkbox v-model="checked" :label="label" :value="value"></el-checkbox>
|
| el-radio-group | 单选框组件 el-radio形式编码 |
<el-radio-group v-model="value">
<el-radio :label="label" :value="value">
</el-radio>
<el-radio :label="label" :value="value">
</el-radio>
</el-radio-group>
|
| el-radio | 复选框组件 |
<el-radio v-model="checked" :label="" :value=""></el-radio>
|
| el-badge | 徽标数组件 |
<el-badge :value="count" :show-zero="false">
</el-badge>
|
| el-calendar | 日历组件 |
<el-calendar v-model="value"></el-calendar>
|
| el-image | 图片组件 |
<el-image :src="" lazy loading="lazy" :fit=""></el-image>
|
| el-backtop | 返回顶部组件 |
<el-backtop target=""></el-backtop>
|
| el-card | 卡片组件 |
<el-card>
<template #header>
</template>
<template #footer>
</template>
</el-card>
|
| el-carousel | 走马灯组件 |
<el-carousel height="400" autoplay :interval="3000" @change="onChange">
<el-carousel-item></el-carousel-item>
<el-carousel-item></el-carousel-item>
</el-carousel>
|
| el-carousel-item | 走马灯子组件 |
<el-carousel-item></el-carousel-item>
|
| el-switch | 开关组件 |
<el-switch v-model="value" :active-value="true" :inactive-value=="false"></el-switch>
|
| el-input | 输入框组件 |
<el-input placeholder="" v-model="value"></el-input>
|
| el-select | 下拉框组件 |
<el-select v-model="value" placeholder="" clearable>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
|
| el-select-v2 | 虚拟化选择器 |
<el-select-v2 v-model="value" options="" :placeholder="" clearable></el-select-v2>
|
| el-input-number | 数字输入框组件 |
<el-input-number :min="" :max="" v-model="value" :step="1"></el-input-number>
|
| el-avatar | 头像组件 |
<el-avatar :size="" :src=""></el-avatar>
|
| el-spin | 加载中组件 |
<el-spin :size="default"></el-spin>
|
| el-divider | 分割线组件 |
<el-divider :direction="horizontal" :content-position="center"></el-divider>
|
| el-skeleton | 骨架屏组件 |
<el-skeleton :rows="10" animated :count="2" :loading="loading"></el-skeleton>
|
| el-alert | 警告提示组件 |
<el-alert type="" title="" closable></el-alert>
|
| el-popconfirm | 气泡二次确认组件 |
<el-popconfirm
title="确认吗？"
confirm-button-text="确认"
cancel-button-text="取消"
@confirm="confirm"
@cancel="cancel"
>
<el-button type="link"></el-button>
</el-popconfirm>
|
| el-popover | 气泡组件 |
<el-popover width="200" title="" content="" trigger="hover" placement="bottom" >
</el-popover>
|
| el-tooltip | 文字提示组件 |
<el-tooltip effect="dark" content="" placement="bottom">
</el-tooltip>
|
| el-tag | 标签组件 |
<el-tag closable type=""></el-tag>
|
| el-slider | 滑动输入条 |
<el-slider v-model="value" :step="1"></el-slider>
|
| el-progress | 进度条组件 |
<el-progress :percentage="" :status=""></el-progress>
|
| el-time-select | 时间选择器 |
<el-time-select v-model="value" clearable placeholder=""></el-time-select>
|
| el-time-picker | 时间选择器 |
<el-time-picker v-model="value" value-format="HH:mm:ss" placeholder="" clearable @change="getTime"></el-time-picker>
|
| el-date-picker | 日期选择器 |
<el-date-picker type="date" v-model="value" format="YYYY-MM-DD" clearable @change="getDateRange"></el-date-picker>
|
| el-date-picker | 日期范围选择器 |
<el-date-picker type="datetime" v-model="value" format="YYYY-MM-DD HH:mm:ss" clearable @change="getDateRange"></el-date-picker>
|
| el-rate | 评分组件 |
<el-rate v-model="value" :max="5" allow-half></el-rate>
|
| el-color-picker | 颜色选择器 |
<el-color-picker v-model="color" show-alpha></el-color-picker>
|
| el-steps | 步骤条组件 |
<el-steps :active="current" direction="horizontal" :status="status">
<el-step title="标题" description="描述"></el-step>
<el-step>
<template #icon>
</template>
<template #title>
</template>
<template #description>
</template>
</el-step>
</el-steps>
|
| el-dialog | 弹窗组件 |
<el-dialog title="title" width="600px" v-model="visible" @close="onClose">
<span>这事一个消息</span>
<template #footer>
<div class="dialog-footer">
<el-button size="small" @click="handleCancel">取 消</el-button>
<el-button size="small" type="primary" @click="handleOk" :loading="confirmLoading">确 定</el-button>
</div>
</template>
</el-dialog>
|
| el-transfer | 穿梭框组件 |
<el-transfer :data="data" v-model="value"></el-transfer>
|
| el-cascader | 级联选择组件 |
<el-cascader v-model="value" :options="options" @change="onChange"></el-cascader>
|
| el-cascader-panel | 级联选择面板组件 |
<el-cascader-panel :options="options"></el-cascader-panel>
|
| el-upload | 上传文件组件 |
<el-upload
name="file"
multiple
v-model:file-list="fileList"
:action="uploadUrl"
:onPreview="preview"
:onRemove="remove"
:onExceed="handleExceed"
:onSuccess="success"
:beforeRemove="beforeRemove"
:limit="3"
>
<template #trigger>
<el-button size="small" type="primary">点击上传</el-button>
</template>
<template #tip>
<div class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</template>
</el-upload>
|
| el-drawer | 抽屉组件 |
<el-drawer
title="Title"
direction="rtl"
show-close
v-model="visible"
:before-close="close"
>
<p></p>
</el-drawer>
|
| el-tree | 树形结构组件 |
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
|
| el-tree-select | 树形选择器组件 |
<el-tree-select
v-model="value"
:data="data"
:render-after-expand="true"
show-checkbox
></el-tree-select>
|
| el-tree-v2 | 虚拟化树形控件 |
<el-tree-v2
:props="props" :data="data"
></el-tree-v2>
|
| el-statistic | 统计组件 |
<el-statistic
:title="title"
:value="value"
:prefix="prefix"
:suffix="suffix"
></el-statistic>
|
| el-countdown | 倒计时组件 |
<el-countdown
:title="title"
:value="value"
:prefix="prefix"
:suffix="suffix"
></el-countdown>
|
| el-affix | 固钉组件 |
<el-affix
:offset="offset"
:position="top"
:target="target"
></el-affix>
|
| el-anchor | 锚点组件 |
<el-anchor :offset="70" direction="horizontal" type="defalut">
<el-anchor-link :href="`#${locale['basic-usage']}`">
{{ locale['Basic Usage'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['horizontal-mode']}`">
{{ locale['Horizontal Mode'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['scroll-container']}`">
{{ locale['Scroll Container'] }}
</el-anchor-link>
</el-anchor>
|
| el-anchor-link | 锚点链接组件 |
<el-anchor-link title="title" :href="`#${locale['basic-usage']}`">
{{ locale['Basic Usage'] }}
</el-anchor-link>
|
| el-page-header | 页头组件 |
<el-page-header content="" @back="\$router.back()"></el-page-header>
|
| el-table | 表格组件 |
<el-table :data="data" border>
<el-table-column label="id" prop="id" width="100"></el-table-column>
<el-table-column label="name">
<template #default="scope">
<span>{{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="100" fixed="right">
<template #header="scope">
<el-button type="link" @click="toDo(scope.row)">修改</el-button>
</template>
</el-table-column>
</el-table>
|
| el-table-v2 | 虚拟化表格 |
<el-auto-resizer>
<template #default="{ height, width }">
<el-table-v2
columns="columns"
data="data"
width="width"
height="height"
cache="cache"
></el-table-v2>
</template>
</el-auto-resizer>
|
| el-form | 表单组件 |
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="姓名" prop="name">
<el-input placeholder="请填写姓名" :maxLength="20" v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="性别" prop="sex">
<el-select placeholder="请选择性别" v-model="form.sex"></el-select>
</el-form-item>
</el-form>
|
| el-form-item | 表单子组件 |
<el-form-item label="" prop="">
</el-form-item>
|
| el-row | 栅格布局组件 |
<el-row :gutter="0">
<el-col :span="12"></el-col>
<el-col :span="12"></el-col>
</el-row>
|
| el-col | 栅格布局子组件 |
<el-col :span=""></el-col>
|
| el-watermark | 水印组件 |
<el-watermark :image="" :content="content" gap="[100,100]"></el-watermark>
|
