element-ui 经验

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'
}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容