Basic
button | tag | link
标签 el-button el-tag el-link
大小尺寸:size:medium / small / mini
定义样式:使用type、plain、round和circle 属性来定义 Button 的样式
颜色:type :primary / success / warning / danger / info / text
Form
Switch 开关
el-switch: text | color | value
属性:on | off active | in active
事件
支持 change
DateTimePicker 日期时间选择器
属性
type : year/month/date/week/ datetime/datetimerange/daterange
Picker Options: disabledDate 设置禁用状态,参数为当前日期,要求返回 Boolean
Data
Table 表格
固定头部
只要在el-table元素中定义了height属性,即可实现固定表头的表格,而不需要额外的代码
固定列
固定列需要使用fixed属性,它接受 Boolean 值或者leftright,表示左边固定还是右边固定。
流体高度
通过设置max-height属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度,则会显示一个滚动条
多级表头
只需要在 el-table-column 里面嵌套 el-table-column,就可以实现多级表头
多选
选择多行数据时使用 Checkbox
实现多选非常简单: 手动添加一个el-table-column,设type属性为selection即可;默认情况下若内容过多会折行显示,若需要单行显示可以使用show-overflow-tooltip属性,它接受一个Boolean,为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。
自定义列模板
通过 Scoped slot 可以获取到 row, column, $index 和 store(table 内部的状态管理)的数据,
Notice
MessageBox 弹框
确认消息
this.$confirm(messate, title, options).then(() => {
// 确认后的 callback
}).catch(() => {
// 取消后的 callback
});
options: {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}