当前位置： 首页 > article >正文

Element笔记

article 2024/10/21 19:52:47

文章目录

  • 1.Element的概念
  • 2.Element入门
  • 3.Element中的常见组件
    • 3.1常见组件-Table表格
    • 3.2常见组件-分页
    • 3.3常见组件-对话框
    • 3.4常见组件-表单

1.Element的概念

Element是饿了么团队研发的,一套为开发者,设计师和产品经理准备的基于Vue2.0的桌面端组件库组件:组成网页的部件,例如:超链接,按钮,图片,表格,表单,分页条等等
官网:https://element.eleme.cn/#/zh-CNListener

2.Element入门

  1. 安装ElementUI组件库（在当前工程的目录下），在命令行执行指令：
npm install element-ui@2.15.3

![[Pasted image 20240819172215.png]]

  1. 引l入ElementUI组件库
    ![[Pasted image 20240819172625.png]]

![[Pasted image 20240819172850.png]]

  1. 访问官网，复制组件代码，作出调整
    ![[Pasted image 20240819173551.png]]

![[Pasted image 20240819174014.png]]

![[Pasted image 20240819174955.png]]

3.Element中的常见组件

3.1常见组件-Table表格

Table表格:用于展示多条结构类似的数据,可对数据进行排序,筛选,比对或其他自定义操作
![[Pasted image 20240819180008.png]]

![[Pasted image 20240819180246.png]]

![[Pasted image 20240819180505.png]]

3.2常见组件-分页

Pagination分页：当数据量过多时，使用分页分解数据。
![[Pasted image 20240819181241.png]]

分页中的layout属性
![[Pasted image 20240819183412.png]]

分页中的两个事件

  1. size-change : pageSize -改变时会触发(每页记录数发生变化)-回调参数:每页条数
  2. current-change :currentPage 改变时会触发(当前页码发生变化)-回调参数:当前页
    在这里插入图片描述
    在这里插入图片描述

事件加上后效果
![[recording.gif]]

3.3常见组件-对话框

Dialog对话框：在保留当前页面状态的情况下，告知用户并承载相关操作。
![[Pasted image 20240819184223.png]]

设置两个相应的数据模型
![[Pasted image 20240819184528.png]]

控制对话框的显示或者隐藏
![[Pasted image 20240819185309.png]]

3.4常见组件-表单

Form表单：由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。
![[Pasted image 20240819191244.png]]
![[Pasted image 20240819192544.png]]![[Pasted image 20240819193245.png]]
呈现效果
在这里插入图片描述

展示form对象内的属性值
form是js对象,想要展示对象内的属性值,要把js对象转换成json字符串
使用JSON.stringfy():
在这里插入图片描述


http://www.kler.cn/news/359148.html

相关文章：

  • MoCoOp_ Mixture of Prompt Learning for Vision Language Models
  • xlnt加载excel报错：xl/workbook.xml:2:2581: error: attribute ‘localSheetId‘ expected
  • Kaggle Python练习：字符串和字典（Exercise: Strings and Dictionaries）
  • PythonNet：实现Python与.Net代码相互调用！
  • 2024-10-14 问AI: [AI面试题] 机器学习中维度的诅咒是什么？
  • c语言基础程序——经典100道实例。
  • Could not retrieve mirrorlist http://mirrorlist.centos.org错误解决方法
  • 【原创】一键安装和更新ollama脚本
  • 13-交通管理器
  • MacOS安装BurpSuite
  • 双足机器人远程操作与动态运动同步研究
  • 编辑器资源管理器
  • 深入解析volatile：如何确保可见性与原子性，并应用于业务场景设计
  • SpreadCheetah：高性能的Excel操作处理.NET库
  • java获取当前服务器的cpu核数、cpu信息
  • 【MySQL】表的约束、基本查询、内置函数
  • 【MySQL】入门篇—实践练习：在MySQL环境中进行案例操作练习
  • MYSQL-查看服务器支持的排序规则（八）
  • JavaWeb开发3
  • 请解读下面的程序：pat =re.compile(r‘\d+‘)res = pat.search(‘www.ddd996.com‘)res.group()