![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
组件---Element
ForeverJPB.
。。。。。。。
展开
-
组件-Element—PageHeader( 页头)
组件-Element—PageHeader( 页头)组件— 通知基础<el-page-header @back="goBack" content="详情页面"></el-page-header><script> export default { methods: { goBack() { console.l...原创 2019-07-04 14:22:22 · 9898 阅读 · 3 评论 -
组件-Element— Breadcrumb (面包屑)
组件-Element— Breadcrumb (面包屑)组件— 通知基础用法<el-breadcrumb separator="/"> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item><a href="/"&g...原创 2019-07-04 14:20:15 · 1328 阅读 · 0 评论 -
组件-Element—Tabs (标签页)
组件-Element—Tabs (标签页)组件— 通知基础用法<template> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane> <...原创 2019-07-04 14:18:19 · 7856 阅读 · 12 评论 -
组件-Element—NavMenu( 导航菜单)
组件-Element—NavMenu( 导航菜单)组件—导航菜单顶栏<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <el-menu-item index="1">处理中心</el-menu-ite...原创 2019-07-04 11:33:06 · 8088 阅读 · 0 评论 -
组件-Element—Notification( 通知)
组件-Element—Notification( 通知)组件— 通知基本用法<template> <el-button plain @click="open1"> 可自动关闭 </el-button> <el-button plain @click="open2"> 不会自动关...原创 2019-07-04 11:01:11 · 1987 阅读 · 0 评论 -
组件-Element—Message (消息提示)
组件-Element—Message (消息提示)组件—消息提示基础用法<template> <el-button :plain="true" @click="open">打开消息提示</el-button> <el-button :plain="true" @click="openVn">VNode</el-button&...原创 2019-07-04 10:03:51 · 1551 阅读 · 0 评论 -
组件-Element—Badge(标记)
组件-Element—Badge(标记)组件—标记基础用法<el-badge :value="12" class="item"> <el-button size="small">评论</el-button></el-badge><el-badge :value="3" class="item"> <el-bu...原创 2019-07-03 19:47:56 · 4109 阅读 · 4 评论 -
组件-Element— Dropdown( 下拉菜单)
组件-Element— Dropdown( 下拉菜单)组件— 下拉菜单基础用法<el-dropdown> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-...原创 2019-07-04 14:29:09 · 13776 阅读 · 4 评论 -
组件-Element—Calendar( 日历)
组件-Element—Calendar( 日历)组件— 日历基本<el-calendar v-model="value"></el-calendar><script> export default { data() { return { value: new Date() } } ...原创 2019-07-04 15:12:15 · 10739 阅读 · 6 评论 -
组件-Element—Timeline(时间线)
组件-Element—Timeline(时间线)组件—时间线基础用法<div class="block"> <div class="radio"> 排序: <el-radio-group v-model="reverse"> <el-radio :label="true">倒序</el-radio&g...原创 2019-07-04 15:05:22 · 33443 阅读 · 10 评论 -
组件-Element—Collapse( 折叠面板)
组件-Element—Collapse( 折叠面板)组件— 折叠面板基础用法<el-collapse v-model="activeNames" @change="handleChange"> <el-collapse-item title="一致性 Consistency" name="1"> <div>与现实生活一致:与现实生活的流程、逻...原创 2019-07-04 15:02:10 · 5741 阅读 · 1 评论 -
组件-Element—Carousel(走马灯)
组件-Element—Carousel(走马灯)组件— 走马灯基础用法<template> <div class="block"> <span class="demonstration">默认 Hover 指示器触发</span> <el-carousel height="150px"> <e...原创 2019-07-04 14:58:25 · 3370 阅读 · 1 评论 -
组件-Element—Popover( 弹出框)
组件-Element—Popover( 弹出框)组件— 弹出框基础用法<template> <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"> ...原创 2019-07-04 14:50:34 · 7523 阅读 · 2 评论 -
组件-Element—Tooltip( 文字提示)
组件-Element—Tooltip( 文字提示)组件— 文字提示基础用法<div class="box"> <div class="top"> <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start"> <el-...原创 2019-07-04 14:47:13 · 2464 阅读 · 0 评论 -
组件-Element—Dialog( 对话框)
组件-Element—Dialog( 对话框)组件— 对话框基本用法<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button><el-dialog title="提示" :visible.sync="dialogVisible" width="30%...原创 2019-07-04 14:43:36 · 3328 阅读 · 0 评论 -
组件-Element---Pagination (分页)
组件-Element—Pagination (分页)组件—分页基础用法<div class="block"> <span class="demonstration">页数较少时的效果</span> <el-pagination layout="prev, pager, next" :total="50"> &l...原创 2019-07-03 19:43:38 · 1628 阅读 · 0 评论 -
组件-Element---Tree (树形控件)
组件-Element—Tree(树形控件)组件—进度条基础用法<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree><script> export default { data() { return { ...原创 2019-07-03 19:38:05 · 7731 阅读 · 8 评论 -
组件-Element---Progress (进度条)
组件-Element—Progress (进度条)组件—进度条线形进度条<el-progress :percentage="50"></el-progress><el-progress :percentage="100" :format="format"></el-progress><el-progress :percentag...原创 2019-07-03 19:03:04 · 13909 阅读 · 1 评论 -
组件-Element---InputNumber(计数器)
组件-Element—InputNumber组件—计数器基础用法<template> <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number></template><script...原创 2019-07-02 19:57:19 · 1511 阅读 · 0 评论 -
组件-Element---Link(文字链接)
组件-Element—Link组件—文字链接基础用法<div> <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link> <el-link type="primary">主要链接</el-link> <el-link type=...原创 2019-07-02 19:48:59 · 10287 阅读 · 3 评论 -
组件-Element---Icon(图标)
组件-Element—Icon组件—图标使用方法<i class="el-icon-edit"></i><i class="el-icon-share"></i><i class="el-icon-delete"></i><el-button type="primary" icon="el-icon-s...原创 2019-07-02 19:38:18 · 1355 阅读 · 0 评论 -
组件-Element---Color(色彩)
组件-Element—Color组件—色彩主色辅助色中性色原创 2019-07-02 19:17:50 · 1237 阅读 · 0 评论 -
组件-Element---Button(按钮)
组件-Element—Button组件—按钮基础用法<el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button&g...原创 2019-07-02 19:14:54 · 824 阅读 · 0 评论 -
组件-Element---Checkbox(多选框)
组件-Element—Checkbox组件—多选框基础用法<template> <!-- `checked` 为 true 或 false --> <el-checkbox v-model="checked">备选项</el-checkbox></template><script> export d...原创 2019-07-02 19:03:11 · 1693 阅读 · 1 评论 -
组件-Element---Input(输入框)
组件-Element—Input组件—输入框基础用法<el-input v-model="input" placeholder="请输入内容"></el-input><script>export default { data() { return { input: '' } }}</script&g...原创 2019-07-02 10:41:10 · 10019 阅读 · 5 评论 -
组件-Element---Table(表格)
组件-Element—Data一、组件—表格基础表格<template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="...原创 2019-07-01 20:39:20 · 770 阅读 · 0 评论 -
组件-Element---Radio(单选框)
组件-Element—Form一、组件—单选框:基础用法<template> <el-radio v-model="radio" label="1">备选项</el-radio> <el-radio v-model="radio" label="2">备选项</el-radio></template>...原创 2019-07-01 20:33:01 · 1209 阅读 · 1 评论 -
组件-Element---Select(选择器)
组件-Element—Select组件—选择器基础用法<template> <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label...原创 2019-07-03 09:10:07 · 704 阅读 · 0 评论 -
组件-Element---Switch(开关)
组件-Element—Switch组件—开关基本用法<el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"></el-switch><script> export default { data() { return ...原创 2019-07-03 09:18:50 · 430 阅读 · 0 评论 -
组件-Element---Tag (标签)
组件-Element—Tag (标签)组件—标签基础用法<el-tag>标签一</el-tag><el-tag type="success">标签二</el-tag><el-tag type="info">标签三</el-tag><el-tag type="warning">标签四</el-...原创 2019-07-03 18:59:10 · 15114 阅读 · 5 评论 -
组件-Element---Form (表单)
组件-Element—Form (表单)组件—表单典型表单<el-form ref="form" :model="form" label-width="80px"> <el-form-item label="活动名称"> <el-input v-model="form.name"></el-input> </el-for...原创 2019-07-03 15:32:36 · 609 阅读 · 0 评论 -
组件-Element—Transfer(穿梭框)
组件-Element—Transfer(穿梭框)组件—穿梭框基础用法<template> <el-transfer v-model="value" :data="data"></el-transfer></template><script> export default { data() { ...原创 2019-07-03 15:11:55 · 2320 阅读 · 1 评论 -
组件-Element—DatePicker(颜色选择器)
组件-Element—DatePicker组件—颜色选择器基础用法<div class="block"> <span class="demonstration">有默认值</span> <el-color-picker v-model="color1"></el-color-picker></div>&...原创 2019-07-03 15:05:02 · 1260 阅读 · 0 评论 -
组件-Element—Rate(评分)
组件-Element—Rate组件—评分基础用法<div class="block"> <span class="demonstration">默认不区分颜色</span> <el-rate v-model="value1"></el-rate></div><div class="block"&g...原创 2019-07-03 15:01:02 · 3753 阅读 · 1 评论 -
组件-Element—Upload(上传)
组件-Element—Upload组件—上传点击上传<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="b...原创 2019-07-03 14:56:07 · 3984 阅读 · 2 评论 -
组件-Element—DateTimePicker(日期时间选择器)
组件-Element—DateTimePicker1组件—日期时间选择器日期和时间点<template> <div class="block"> <span class="demonstration">默认</span> <el-date-picker v-model="value1" t...原创 2019-07-03 14:46:48 · 4104 阅读 · 2 评论 -
组件-Element—DatePicker(日期选择器)
组件-Element—DatePicker组件—日期选择器选择日<template> <div class="block"> <span class="demonstration">默认</span> <el-date-picker v-model="value1" type="date"...原创 2019-07-03 14:33:41 · 586 阅读 · 0 评论 -
组件-Element---TimePicker(时间选择器)
组件-Element—TimePicker组件—时间选择器固定时间点<el-time-select v-model="value" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }" placeholder="选择时间"></el-time-sel...原创 2019-07-03 09:57:34 · 3110 阅读 · 2 评论 -
组件-Element---Slider(滑块)
组件-Element—Slider组件—滑块基础用法<template> <div class="block"> <span class="demonstration">默认</span> <el-slider v-model="value1"></el-slider> </div&g...原创 2019-07-03 09:47:19 · 4024 阅读 · 0 评论 -
组件-Element---Cascader(级联选择器)
组件-Element—Cascader组件—级联选择器基础用法<div class="block"> <span class="demonstration">默认 click 触发子菜单</span> <el-cascader v-model="value" :options="options" @change=...原创 2019-07-03 09:37:43 · 5109 阅读 · 2 评论