文章详细介绍了ElementUI中几个关键组件的用法，包括el-tree（树形控件）的展开、选择配置，el-table（表格组件）的数据展示和列定义，el-pagination（分页器）的页面控制，el-dialog（对话框）的显示设置，el-form（表单）的数据模型和校验规则，以及el-switch（开关组件）、el-cascader（级联选择器）和el-upload（上传组件）的功能特性。
常用组件详解
el-tree 树形控件
用清晰的层级结构展示信息，可展开或折叠。
data --- 绑定的数据
:props="defaultProps" 配置选项,例如:
:default-expand-all="true" 是否默认展开所有节点
:check-on-click-node="false" 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点
show-checkbox 节点是否可被选择
check-strictly 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
lazy 是否懒加载子节点，需与 load 方法结合使用
load 加载子树数据的方法，仅当 lazy 属性为true 时生效
@node-click="" 节点被点击时的回调
@current-change="" 节点选中状态发生变化时的回调
常用的方法: setCurrentKey 通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性 多用于复选框回显
el-table 表格组件
用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
data --- 绑定的数据
在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。
align --- 对齐方式
使用插槽 slot-scope="{ row }" 或 v-slot="{row}" 或 #default="{ row }" 表示结构 scope.row
el-pagination 分页器
当数据量过多时，使用分页分解数据。
background 是否为分页按钮添加背景色
page-sizes 每页显示个数选择器的选项设置
total 总条目数
current-page 当前页数,支持.sync修饰符
page-size 每页显示条目个数，支持 .sync 修饰符
layout 组件布局，子组件名用逗号分隔
el-dialog 对话框(弹框)
在保留当前页面状态的情况下，告知用户并承载相关操作。
append-to-body Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true
visible 是否显示Dialog, 支持.sync修饰符
el-form 表单
由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据
:model 表单数据对象
rules 表单校验规则 需配合 el-form-item 的prop属性使用
el-switch 开关组件
表示两种相互对立的状态间的切换，多用于触发「开/关」。
可以使用active-color属性与inactive-color属性来设置开关的背景色
active-value switch 打开时的值
inactive-value switch 关闭时的值
el-cascader 级联选择器
当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。
:props="defaultProps" 配置选项 例如:
value 选中项绑定值
options 可选项数据源，键名可通过 Props 属性配置
separator 级联之间的分隔符
el-upload 上传
通过点击或者拖拽上传文件
action 必选参数，上传的地址
show-file-list 是否显示已上传文件列表
on-success 上传成功时的钩子
before-upload 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
http-request 覆盖默认的上传行为，可以自定义上传的实现
el-select/option 选择器
当选项过多时，使用下拉菜单展示并选择内容。
v-model 绑定值
size 尺寸大小
el-option
label 选项的标签，若不设置则默认与 value 相同
value 选项的值
扫一扫
828
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
