lucky_ly的博客

菜单是几乎是每个管理系统的软件系统中不可或缺的，element-plus提供的菜单组件可以快速完成大部分的菜单的需求开发，该组件内置和vue-router的集成，使用起来很方便。主要组件如下。

el-breadcrumb-item的to和replace属性和vue-router的一致，需要结合vue_router一起使用。el-breadcrumb 和el-breadcrumb-item,el-breadcrumb的spearator指定item的分隔符。面包屑组件主要用来显示当页面路径，以及快速返回之前的页面。vue-router配置如下。

表格是在前端页面中是经常被用到的，尤其是管理系统，几乎每个页面都会存在表格，所以掌握表格组件是非常有必要的。element-plus提供el-table，el-table-column来渲染表格，

分页组件是非常常用的组件之一和表格组件一般成对出现，element-plus 分页组件的组件名是el-pagination。

el-upload 用法

单选按钮组件适用于同一组类型的选项只能互斥选择的场景，就是支持单选。单选组件包含以下3个组件。

单个el-form标签内包裹若干个el-form-item,el-form-item包裹具体的表单组件，如输入框组件，多选组件，日期组件等。el-form组件的主要作用是：提供统一的布局给其他表单组件，其他组件可以继承表单组件的size,以及规则校验。elment-plus的表单组件的标签有el-form,el-form-item。

el-date-picker日期选择器组件可根据年，月，日期，时间范围来进行选择，可以自定义日期格式，和样式，还提供多种内置事件。

单个checkbox 绑定的响应式的值类型为bool类型，同一个组的checkbox多选其值对应值的数组，类型根据checkbox的value值而来。checkbox结合button展示等，是否有边框，是否禁用等。label只用来显示具体的值，根据value属性来设置。element-plus的checkbox提供多种特性。限制最小选的，和最大选择数量。

根据输入框的输入获取建议的内容，其接受值是一个函数，有2个参数，querystring:输入的内容，callback内置函数，将结果传入callback中完成渲染。级联选择器适用于带层级结构的筛选项。该组件支持多选，禁用，多级嵌套，内置多种事件等特性。自补全组件的功能和可以根据输入过滤的el-select组件有些类似。

size：决定子元素间距大小，默认有三个规格small,default,large,还可设置具体的数值。el-space标签可以很方便的设置标签间距和分隔符，对齐方式，是否拆行等属性。fill:子元素是否自动填充父容器。wrap:是否拆行，

el-scrollbar组件可以替换原生的滚动条，可以设置出现滚动条的高度，若无设置则根据容器自适应。通过使用 setScrollTop 与 setScrollLeft 方法，可以手动控制滚动条滚动。scroll 滚动条的滚动事件，会返回滚动条当前的位置。

el-text（文本操作的组件）

element-plus的icon 已经独立出来了，需要单独安装。

el-container采用flex布局，如果其子元素包含el-header或el-footer时会采用垂直布局，否则会采用水平布局，可设置其direction属性为’horizontal’ | ‘vertical’。element-plus的容器组件主要有el-container,el-aside,el-header,el-main,el-footer,后面4个组件其父组件必须是el-container。el-aside为侧边栏组件，可设置其width属性。el-header为头部容器。

elment-plus的layout组件包括el-row和e-col，和bootstrap的栅格类似，e-row采用flex布局，分成了24个栅栏，单个e-col默认占24,可以通过span属性指定其大小，offset属性指定其偏移的栅栏个数。e-row组件的父组件不要使用display的inline的属性，否则会导致组件无法撑开。

element-plus 是element-ui为适配vue3而开发element-ui的包。vue3通过vite创建项目后，根据指令输入project信息。