Elementui 中的常用组件有哪些?请简述你经常使用的并且他 们的属性有哪些?

本文详细介绍ElementUI中的常用组件,包括Container布局容器、Dropdown下拉菜单、NavMenu导航菜单、Table表格及Form表单等,帮助读者快速掌握这些组件的使用方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Container 布局容器

Container 布局容器:用于布局的容器组件,方便快速搭建页面的基本结构

  • <el‐container>:外层容器。当子元素中包含 <elheader><el‐footer>时,全部子元素会垂直上下排列,否则会水平左右排列
  • <el‐header>:顶栏容器
  • <el‐aside>:侧边栏容器
  • <el‐main>:主要区域容器
  • <el‐footer>:底栏容器

Dropdown 下拉菜单

Dropdown 下拉菜单:将动作或菜单折叠到下拉菜单中

  • <el-dropdown split-button>:下拉按钮
  • <el-dropdown-menu>下拉菜单
  • <el-dropdown-item>下拉项
  • divided 分隔

NavMenu 导航菜单

NavMenu 导航菜单:为网站提供导航功能的菜单
<el-menu>:导航菜单
<el-submenu index="1">:导航按钮
<template slot="title">标题和名称 <i class="el-icon-menu">图标 -
<span slot="title">导航二</span>导航标题
<el-menu-item>导航项

Table 表格

Table 表格:用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或
其他自定义操作

  • <el-table :data="tableData" stripe>:表格\数据绑定对象\样式
  • <el-table-column prop="date" label="日期">:表格行\数据绑定对象属性\表头
    align="center":居中
  • slot-scope:作用域插槽,可以获取表格数据
  • cope:代表表格数据,可以通过 scope.row 来获取表格当前行数据,scope 不是固定写法
  • <el-button type="primary" size="mini"@click="handleUpdate(scope.row)">按钮\类型\大小\事件绑定

Form 表单

  • <el-form :model="ruleForm" :rules="rules" ref="ruleForm">:表单/绑定数据模板/绑定校验
  • <el-form-item label="活动名称" prop="name">表单项\显示内容\数据模板属性绑定
  • <el-input v-model="ruleForm.name">表单输入框/数据绑定
  • <el-select v-model="ruleForm.region" placeholder="请选择活动区域">:下拉框/数据绑定/提示
  • <el-option label="区域一" value="shanghai"></el-option>:下拉项/数据项
  • ref 绑定校验信息
  • prop 对应 rules 中对应的校验规则字段名
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值