TypechoJoeTheme

Toasobi的博客

ElementUI快速上手

本文最后更新于2023年09月19日,已超过365天没有更新。如果文章内容或图片资源失效,请留言反馈,我会及时处理,谢谢!
  • 引入相关文件


  • ElementUI的布局模式
elementUI也有Flex布局风格的自成布局模式
el-row el-col布局: gutter是el-col之间的间隔 span是el-col的权重(span一共24个权重)


  • Element:按钮
提供了各种样式的按钮,下面演示了颜色,形状上不同的按钮
plain:默认为true,表示朴素按钮,无背景色


  • Element:输入框
elementUI的输入框能输入的前提是使用v-model绑定了数据
clearable属性表示有一键清除功能


  • Element:下拉框
下拉框数据可以使用多个el-option写死,也可以使用单个el-option,v-for动态绑定
默认是现实label属性,没有则显示value属性。二者同时出现时,label是现显示,value是实际绑定值(这里是select2)
filiterable表示可搜索的
@change为这里的绑定事件,是在绑定的值发生改变后触发(这里是控制台打印)


  • Element:联想建议输入框
coffee为联想对象数组,联想对象数组一定要带value属性名称
联想建议函数中过滤对象数组中符合的对象,并且通过cb(callback函数)回显


  • Element:单选,多选框
后面也可以跟@change绑定事件


  • Element:日期选择器
有可以选开始时间和结束时间的
有精确到分钟,秒的


  • Element:表单


  • Element:多样化提示
接上面的表单编辑按钮

朗读
赞(0)
评论 (0)