结束了vue的基础学习，现在进一步学习组件
Element-Plus部分学习目标：
| Element Plus | 1、查阅官方文档指南 |
| 2、学习常用组件的使用方法 |
| 3、Table、Pagination、Form |
| 4、Input、Input Number、Switch、Select、Date Picker、Button |
| 5、Message、MessageBox、Notification |
查阅官方文档： 快速开始 | Element Plus
具体内容官网讲解的很清楚，这里只根据学习目标，以及以后可能常用的部分做总结，学习理解的话还是建议大家直接去看官方文档。
常用属性
| 属性 | 类型 | 可选值/说明 | 默认值 |
|---|
| data | Array | 表格数据数组 | [] |
| border | Boolean | true/false (是否显示边框) | false |
| stripe | Boolean | true/false (是否显示斑马纹) | false |
| height | String/Number | 固定高度，如 '400px' | - |
| max-height | String/Number | 最大高度 | - |
| size | String | medium / small / mini (表格尺寸) | - |
| fit | Boolean | true/false (列宽是否自撑开) | true |
| show-header | Boolean | true/false (是否显示表头) | true |
| highlight-current-row | Boolean | true/false (是否高亮当前行) | false |
Table-column 属性
| 属性 | 类型 | 可选值/说明 | 默认值 |
|---|
| prop | String | 对应列内容的字段名 | - |
| label | String | 显示的标题 | - |
| width | String/Number | 列宽度 | - |
| min-width | String/Number | 最小列宽 | - |
| fixed | String/Boolean | true/false/'left'/'right' (固定列) | - |
| sortable | Boolean/String | true/false/'custom' (是否可排序) | false |
| align | String | left/center/right (对齐方式) | left |
| header-align | String | left/center/right (表头对齐方式) | - |
常用属性
| 属性 | 类型 | 可选值/说明 | 默认值 |
|---|
| current-page | Number | 当前页码 | 1 |
| page-size | Number | 每页显示条目数 | 10 |
| total | Number | 总条目数 | - |
| page-sizes | Array | [10, 20, 30, 40, 50, 100] (每页显示个数选择器的选项设置) | [10, 20, 30, 50, 100] |
| layout | String | 组件布局，可用值：
sizes, prev, pager, next, jumper, ->, total, slot | 'prev, pager, next, jumper, ->, total' |
| background | Boolean | true/false (是否为分页按钮添加背景色) | false |
| small | Boolean | true/false (是否使用小型分页样式) | false |
Form 表单组件
常用属性
| 属性 | 类型 | 可选值/说明 | 默认值 |
|---|
| model | Object | 表单数据对象 | - |
| rules | Object | 表单验证规则 | - |
| label-position | String | right/left/top (表单域标签的位置) | right |
| label-width | String/Number | 表单域标签的宽度 | - |
| size | String | medium / small / mini (控制表单内组件尺寸) | - |
| disabled | Boolean | true/false (是否禁用表单中所有组件) | false |
| inline | Boolean | true/false (行内表单模式) | false |
| show-message | Boolean | true/false (是否显示校验错误信息) | true |
Form-item 属性
| 属性 | 类型 | 可选值/说明 | 默认值 |
|---|
| prop | String | 表单域 model 字段 | - |
| label | String | 标签文本 | - |
| label-width | String/Number | 标签宽度 | - |
| required | Boolean | true/false (是否必填) | false |
| rules | Object/Array | 表单验证规则 | - |
| size | String | medium / small / mini (控制组件尺寸) | - |
Input 输入框
常用属性
| 属性 | 类型 | 可选值/说明 | 默认值 |
|---|
| type | String | text / textarea / password / number / email / url | text |
| size | String | medium / small / mini (输入框尺寸) | - |
| maxlength | Number | 最大输入长度 | - |
| minlength | Number | 最小输入长度 | - |
| show-word-limit | Boolean | true/false (是否显示输入字数统计) | false |
| clearable | Boolean | true/false (是否可清空) | false |
| show-password | Boolean | true/false (是否显示切换密码图标) | false |
| disabled | Boolean | true/false (是否禁用) | false |
| prefix-icon | String | 输入框头部图标类名 | - |
| suffix-icon | String | 输入框尾部图标类名 | - |
Select 选择器
常用属性
| 属性 | 类型 | 可选值/说明 | 默认值 |
|---|
| multiple | Boolean | true/false (是否多选) | false |
| disabled | Boolean | true/false (是否禁用) | false |
| clearable | Boolean | true/false (是否可以清空选项) | false |
| filterable | Boolean | true/false (是否可搜索) | false |
| remote | Boolean | true/false (是否为远程搜索) | false |
| loading | Boolean | true/false (是否正在从远程获取数据) | false |
| size | String | medium / small / mini (选择器尺寸) | - |
| collapse-tags | Boolean | true/false (多选时是否将选中值按文字的形式展示) | false |
Option 属性
| 属性 | 类型 | 可选值/说明 | 默认值 |
|---|
| value | String/Number/Boolean/Object | 选项的值 | - |
| label | String/Number | 选项的标签 | - |
| disabled | Boolean | true/false (是否禁用该选项) | false |
Date Picker 日期选择器
常用属性
| 属性 | 类型 | 可选值/说明 | 默认值 |
|---|
| type | String | year/month/date/dates/datetime/datetimerange/daterange/monthrange | date |
| format | String | 显示在输入框中的格式，如 'yyyy-MM-dd' | - |
| value-format | String | 绑定值的格式 | - |
| placeholder | String | 占位文本 | - |
| range-separator | String | 选择范围时的分隔符 | '-' |
| start-placeholder | String | 范围选择时开始日期的占位内容 | - |
| end-placeholder | String | 范围选择时结束日期的占位内容 | - |
| disabled | Boolean | true/false (是否禁用) | false |
| clearable | Boolean | true/false (是否显示清除按钮) | true |
| size | String | medium / small / mini (输入框尺寸) | - |
Button 按钮
常用属性
| 属性 | 类型 | 可选值/说明 | 默认值 |
|---|
| type | String | primary / success / warning / danger / info / text | - |
| size | String | medium / small / mini (按钮尺寸) | - |
| plain | Boolean | true/false (是否朴素按钮) | false |
| round | Boolean | true/false (是否圆角按钮) | false |
| circle | Boolean | true/false (是否圆形按钮) | false |
| loading | Boolean | true/false (是否加载中状态) | false |
| disabled | Boolean | true/false (是否禁用状态) | false |
| icon | String | 图标类名 | - |
| autofocus | Boolean | true/false (是否默认聚焦) | false |
| native-type | String | button / submit / reset (原生 type 属性) | button |
Message 消息提示
配置选项
| 属性 | 类型 | 可选值/说明 | 默认值 |
|---|
| message | String | 消息文字 | - |
| type | String | success / warning / info / error | info |
| duration | Number | 显示时间(毫秒)，设为 0 则不会自动关闭 | 3000 |
| showClose | Boolean | true/false (是否显示关闭按钮) | false |
| center | Boolean | true/false (文字是否居中) | false |
| offset | Number | 距离窗口顶部的偏移量 | 20 |
| grouping | Boolean | true/false (合并内容相同的消息) | false |
MessageBox 弹框
配置选项
| 属性 | 类型 | 可选值/说明 | 默认值 |
|---|
| title | String | 标题 | '提示' |
| message | String | 消息正文内容 | - |
| type | String | success / warning / info / error | - |
| confirmButtonText | String | 确认按钮文本 | '确定' |
| cancelButtonText | String | 取消按钮文本 | '取消' |
| showCancelButton | Boolean | true/false (是否显示取消按钮) | false |
| showConfirmButton | Boolean | true/false (是否显示确认按钮) | true |
| closeOnClickModal | Boolean | true/false (是否可通过点击遮罩关闭) | true |
| closeOnPressEscape | Boolean | true/false (是否可通过 ESC 键关闭) | true |
| center | Boolean | true/false (内容是否居中) | false |
Notification 通知
配置选项
| 属性 | 类型 | 可选值/说明 | 默认值 |
|---|
| title | String | 标题 | - |
| message | String | 消息文字 | - |
| type | String | success / warning / info / error | - |
| duration | Number | 显示时间(毫秒)，设为 0 则不会自动关闭 | 4500 |
| position | String | top-right / top-left / bottom-right / bottom-left | top-right |
| offset | Number | 距离窗口顶部的偏移量 | 0 |
| showClose | Boolean | true/false (是否显示关闭按钮) | true |
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
