医院网站开发公司,设计素材网站好融资吗,品牌微营销网站建设,营销型网站建设哪家便宜概述
Element-UI 是由饿了么前端团队推出的一款基于 Vue.js 2.0 的桌面端 UI 组件库。它为开发者提供了一套完整、易用、美观的组件解决方案#xff0c;极大地提升了前端开发的效率和质量。本文为自学实践记录#xff0c;详细内容见 #x1f4da; ElementUI官网
1. 基础组…概述
Element-UI 是由饿了么前端团队推出的一款基于 Vue.js 2.0 的桌面端 UI 组件库。它为开发者提供了一套完整、易用、美观的组件解决方案极大地提升了前端开发的效率和质量。本文为自学实践记录详细内容见 ElementUI官网
1. 基础组件
用于构建页面的基本结构比如布局Layout、容器Container、图标Icon、按钮Button、文字链接Link等。
Layout 布局
通过基础的 24 分栏迅速简便地创建布局。
templatedivel-row :gutter20el-col :span6div classgrid-content bg-purple/div/el-colel-col :span6div classgrid-content bg-purple/div/el-colel-col :span6div classgrid-content bg-purple/div/el-colel-col :span6div classgrid-content bg-purple/div/el-col/el-row/div
/templatescript
export default {name: HomeView,
};
/script
style
.el-col {border-radius: 4px;
}
.bg-purple {background: #d3dce6;
}
.grid-content {border-radius: 4px;min-height: 36px;
}
/styleel-row gutter指定每一栏之间的间隔默认间隔为 0。 el-col span指定栅格占据的列数
Container 布局容器
快速搭建页面的基本结构
templatedivel-containerel-asideAside/el-asideel-containerel-headerHeader/el-headerel-mainMain/el-mainel-footerFooter/el-footer/el-container/el-container/div
/templatescript
export default {name: HomeView,
};
/script
style
.el-header {background-color: #6da5ee;
}
.el-aside {background-color: #b3c0d1;
}
.el-main {background-color: #476d9e;
}
.el-footer {background-color: #213e64;
}
/styleel-container外层容器。当子元素中包含 el-header 或 el-footer 时全部子元素会垂直上下排列否则会水平左右排列。el-header顶栏容器。el-aside侧边栏容器。el-main主要区域容器。el-footer底栏容器。
实例
templatedivel-container styleheight: 500px; border: 1px solid #eeeel-aside width200px stylebackground-color: rgb(238, 241, 246)el-menuel-submenu index1template slottitlei classel-icon-message/i导航一/templateel-menu-item index1-1选项1-1/el-menu-itemel-submenu index1-2template slottitle选项1-2/templateel-menu-item index1-2-1选项1-2-1/el-menu-item/el-submenu/el-submenuel-menu-item index2选项2/el-menu-item/el-menu/el-asideel-containerel-header styletext-align: right; font-size: 12pxel-dropdowni classel-icon-setting stylemargin-right: 15px/iel-dropdown-menu slotdropdownel-dropdown-item查看/el-dropdown-itemel-dropdown-item新增/el-dropdown-itemel-dropdown-item删除/el-dropdown-item/el-dropdown-menu/el-dropdownspan王小虎/span/el-headerel-mainel-table :datatableDatael-table-column propdate label日期 width140/el-table-columnel-table-column propname label姓名 width120/el-table-columnel-table-column propaddress label地址 /el-table-column/el-table/el-main/el-container/el-container/div
/templatescript
export default {name: HomeView,data() {const item {date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,};return {tableData: Array(20).fill(item),};},
};
/script
style
.el-header {background-color: #b3c0d1;color: #333;line-height: 60px;
}.el-aside {color: #333;
}
/styleIcon 图标
i 直接通过设置类名为 el-icon-iconName 来使用即可。
templatedivi classel-icon-edit/ii classel-icon-share/ii classel-icon-delete/iel-button typeprimary iconel-icon-search搜索/el-button/div
/templatescript
export default {name: HomeView,
};
/script图标详见 Icon 图标
Button 按钮
el-button 标签使用按钮 el-button-group标签为按钮分组。
templatedivel-rowh3默认按钮/h3el-button默认按钮/el-buttonel-button typeprimary主要按钮/el-buttonel-button typesuccess成功按钮/el-buttonel-button typewarning警告按钮/el-buttonel-button typedanger危险按钮/el-button/el-rowel-rowh3朴素按钮/h3el-button plain朴素按钮/el-buttonel-button typeprimary plain主要按钮/el-buttonel-button typesuccess plain成功按钮/el-button/el-rowel-rowh3圆角按钮/h3el-button round圆角按钮/el-buttonel-button typeprimary round主要按钮/el-buttonel-button typesuccess round成功按钮/el-button/el-rowel-rowh3图标按钮/h3el-button iconel-icon-search circle/el-buttonel-button typeprimary iconel-icon-edit circle/el-buttonel-button typesuccess iconel-icon-check circle/el-buttonel-button typedanger iconel-icon-delete circle/el-button/el-rowel-rowh3文字按钮/h3el-button typetext文字按钮/el-button/el-rowel-rowh3文字图标/h3el-button typeprimary iconel-icon-edit/el-buttonel-button typeprimary iconel-icon-search搜索/el-buttonel-button typeprimary上传i classel-icon-upload el-icon--right/i/el-button/el-rowel-rowh3按钮组/h3el-button-groupel-button typeprimary iconel-icon-edit/el-buttonel-button typeprimary iconel-icon-share/el-buttonel-button typeprimary iconel-icon-delete/el-button/el-button-group/el-row/div
/templatescript
export default {name: HomeView,
};
/script
style
.el-row {margin: 5px;
}
/style常用属性
type类型primary / success / warning / danger / info / textplain是否朴素按钮booleanround是否圆角按钮booleancircle是否圆形按钮booleandisabled是否禁用状态booleanicon图标类名。size尺寸medium / small / mini
Link 文字链接
文字超链接 el-link
templatedivel-rowh3文字链接/h3el-link hrefhttps://element.eleme.io target_blank默认链接/el-linkel-link typeprimary主要链接/el-linkel-link typesuccess成功链接/el-linkel-link typedanger危险链接/el-link/el-rowel-rowh3下划线/h3el-link :underlinefalse无下划线/el-linkel-link有下划线/el-link/el-rowel-rowh3带图标文字链接/h3el-link iconel-icon-edit编辑/el-linkel-link 查看i classel-icon-view el-icon--right/i /el-link/el-row/div
/templatescript
export default {name: HomeView,
};
/script
style
.el-row {margin: 5px;
}
.el-link {margin: 5px;
}
/style常用属性
type类型primary / success / warning / danger / infounderline是否下划线booleandisabled是否禁用状态booleanhref原生 href 属性icon图标类名 2. 导航组件
导航组件用于创建各种导航菜单和路由包括菜单NavMenu、面包屑Breadcrumb、页签Tabs、下拉菜单Dropdown、步骤条Steps等。
NavMenu 导航菜单
el-menu 为网站提供导航功能的菜单。导航菜单默认为垂直模式通过 mode 属性可以使导航菜单变更为 horizontal 水平模式。
background-color菜单的背景色text-color菜单的文字颜色active-text-color当前激活菜单的文字颜色collapse是否水平折叠收起菜单router是否使用 vue-router 的模式启用该模式会在激活导航时以 index 作为 path 进行路由跳转
el-menu-item 组件提供单级菜单index 设置唯一标志route 设置 Vue Router 路径对象。
el-submenu 组件可以生成二级菜单index 设置唯一标志。
el-menu-item-group 组件可以实现菜单进行分组分组名可以通过 title 属性直接设定也可以通过具名 slot 来设定。
templatedivh3horizontal-水平模式/h3el-menu:default-activeactiveIndexclassel-menu-demomodehorizontalselecthandleSelectel-menu-item index1处理中心/el-menu-itemel-submenu index2template slottitle 我的工作台 /templateel-menu-item index2-1选项1/el-menu-itemel-menu-item index2-2选项2/el-menu-itemel-menu-item index2-3选项3/el-menu-itemel-submenu index2-4template slottitle 选项4 /templateel-menu-item index2-4-1选项1/el-menu-itemel-menu-item index2-4-2选项2/el-menu-itemel-menu-item index2-4-3选项3/el-menu-item/el-submenu/el-submenuel-menu-item index3 disabled消息中心/el-menu-itemel-menu-item index4a hrefhttps://www.ele.me target_blank订单管理/a/el-menu-item/el-menuh3自定义颜色-折叠/h3el-radio-group v-modelisCollapse stylemargin-bottom: 20pxel-radio-button :labelfalse展开/el-radio-buttonel-radio-button :labeltrue收起/el-radio-button/el-radio-groupel-menu:collapseisCollapsedefault-active2classel-menu-vertical-demoopenhandleOpenclosehandleClosebackground-color#545c64text-color#fffactive-text-color#ffd04bel-submenu index1template slottitlei classel-icon-location/ispan导航一/span/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index1-1选项1/el-menu-itemel-menu-item index1-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index1-3选项3/el-menu-item/el-menu-item-groupel-submenu index1-4template slottitle选项4/templateel-menu-item index1-4-1选项1/el-menu-item/el-submenu/el-submenuel-menu-item index2i classel-icon-menu/ispan slottitle导航二/span/el-menu-itemel-menu-item index3 disabledi classel-icon-document/ispan slottitle导航三/span/el-menu-itemel-menu-item index4i classel-icon-setting/ispan slottitle导航四/span/el-menu-item/el-menu/div
/templatescript
export default {name: HomeView,data() {return {activeIndex: 1,isCollapse: true,};},methods: {handleSelect(key, keyPath) {console.log(key, keyPath);},handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);},},
};
/script
style
.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;
}
/style组件递归 vue组件递归 element多层导航菜单
基于 element 导航菜单实现多层菜单判断 children 有没有内容children 没内容就是叶子节点 el-menu-item有内容就是父菜单 el-submenu。
treeMenus 组件
templatedivtemplate v-for(item,index) in listtemplate v-ifitem.children.lengthel-submenu :keyindex :indexitem.indextemplate :indexitem.index slottitlei :classitem.icon/ispan{{item.name}}/span/templatetreeMenus :listitem.children/treeMenus/el-submenu/templatetemplate v-elseel-menu-item :keyindex :indexitem.indexi :classitem.icon/ispan{{item.name}}/span/el-menu-item/template/template/div
/template
script
export default {name: treeMenus,props: {list: Array}
};
/script调用
templatedivel-menu:collapseisCollapseclassel-menu-vertical-demoselecthandleSelecttreeMenus :listtreeMenusData/treeMenus/el-menu/div
/templatescript
import treeMenus from ../views/treeMenus.vue;export default {name: HomeView,components: {treeMenus,},data() {return {isCollapse: false,treeMenusData: [{name: 菜单1,index: menu1,icon: el-icon-menu,children: [{name: 菜单1-1,index: menu1-1,icon: el-icon-menu,children: [{name: 菜单1-1-1,index: menu1-1-1,icon: el-icon-menu,children: [],},{name: 菜单1-1-2,index: menu1-1-2,icon: el-icon-menu,children: [],},],},{name: 菜单1-2,index: menu1-2,icon: el-icon-menu,children: [],},],},{name: 菜单2,index: menu2,icon: el-icon-document-copy,children: [{name: 数据集管理,index: dataset,icon: el-icon-document-copy,children: [],},],},{name: 菜单3,index: menu3,icon: el-icon-folder,children: [],},],};},methods: {handleSelect(key, keyPath) {console.log(key, keyPath);}}
};
/script
style
.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;
}
/styleTabs 标签页
el-tabs 分隔内容上有关联但属于不同类别的数据集合。
value / v-model选中选项卡的 nametype风格类型card、border-cardtab-position选项卡所在位置top、right、bottom、left
templatedivh3基础用法/h3el-tabs v-modelactiveName1 tab-clickhandleClickel-tab-pane label用户管理 namefirst用户管理/el-tab-paneel-tab-pane label配置管理 namesecond配置管理/el-tab-paneel-tab-pane label角色管理 namethird角色管理/el-tab-paneel-tab-pane label定时任务补偿 namefourth定时任务补偿/el-tab-pane/el-tabsh3选项卡样式/h3el-tabs v-modelactiveName2 tab-clickhandleClick typecardel-tab-pane label用户管理 namefirst用户管理/el-tab-paneel-tab-pane label配置管理 namesecond配置管理/el-tab-paneel-tab-pane label角色管理 namethird角色管理/el-tab-paneel-tab-pane label定时任务补偿 namefourth定时任务补偿/el-tab-pane/el-tabsh3卡片化/h3el-tabs v-modelactiveName3 tab-clickhandleClick typeborder-cardel-tab-pane label用户管理 namefirst用户管理/el-tab-paneel-tab-pane label配置管理 namesecond配置管理/el-tab-paneel-tab-pane label角色管理 namethird角色管理/el-tab-paneel-tab-pane label定时任务补偿 namefourth定时任务补偿/el-tab-pane/el-tabsh3位置/h3el-tabs v-modelactiveName4 tab-clickhandleClick typeborder-card :tab-positiontabPositionel-tab-pane label用户管理 namefirst用户管理/el-tab-paneel-tab-pane label配置管理 namesecond配置管理/el-tab-paneel-tab-pane label角色管理 namethird角色管理/el-tab-paneel-tab-pane label定时任务补偿 namefourth定时任务补偿/el-tab-pane/el-tabsh3自定义标签页/h3el-tabs v-modelactiveName5 tab-clickhandleClick typeborder-cardel-tab-pane namefirsttemplate slotlabeli classel-icon-user/i span用户管理/span/templateel-table :datatableData stylewidth: 100%el-table-column propdate label日期 width180/el-table-columnel-table-column propname label姓名 width180/el-table-columnel-table-column propaddress label地址/el-table-column/el-table/el-tab-paneel-tab-pane label配置管理 namesecond配置管理/el-tab-paneel-tab-pane label角色管理 namethird角色管理/el-tab-paneel-tab-pane label定时任务补偿 namefourth定时任务补偿/el-tab-pane/el-tabs/div
/templatescript
export default {data() {return {activeName1: second,activeName2: second,activeName3: second,activeName4: second,activeName5: second,tabPosition: left,tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1517 弄}, {date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄}]};},methods: {handleClick(tab, event) {console.log(this.activeName);console.log(tab, event);},},
};
/scriptBreadcrumb 面包屑
Breadcrumb 面包屑用于显示当前页面的路径快速返回之前的任意页面。el-breadcrumb 中使用 el-breadcrumb-item 标签表示从首页开始的每一级。Element 提供了一个 separator 属性在 el-breadcrumb 标签中设置它来决定分隔符它只能是字符串默认为斜杠 /。
separator-class属性可使用相应的 icon 作为分隔符。to路由跳转对象同 vue-router 的 toreplace使用 to 进行路由跳转
templatedivh3基础用法/h3el-breadcrumb separator/el-breadcrumb-item :to{ path: / }首页/el-breadcrumb-itemel-breadcrumb-itema href/活动管理/a/el-breadcrumb-itemel-breadcrumb-item活动列表/el-breadcrumb-itemel-breadcrumb-item活动详情/el-breadcrumb-item/el-breadcrumbh3图标分隔符/h3el-breadcrumb separator-classel-icon-arrow-rightel-breadcrumb-item :to{ path: / }首页/el-breadcrumb-itemel-breadcrumb-itema href/活动管理/a/el-breadcrumb-itemel-breadcrumb-item活动列表/el-breadcrumb-itemel-breadcrumb-item活动详情/el-breadcrumb-item/el-breadcrumb/div
/templatescript
export default {name: HomeView,
};
/scriptDropdown 下拉菜单
el-dropdown-menu 定义下拉菜单需要通过具名 slot 为 dropdown 来设置下拉菜单。默认情况下下拉按钮只要 hover 即可无需点击也会显示下拉菜单。
trigger触发下拉的行为hover、clickcommand点击菜单项触发的事件回调
templatedivh3默认hover 激活/h3el-dropdownspan classel-dropdown-link下拉菜单i classel-icon-arrow-down el-icon--right/i/spanel-dropdown-menu slotdropdownel-dropdown-item iconel-icon-plus黄金糕/el-dropdown-itemel-dropdown-item iconel-icon-circle-plus狮子头/el-dropdown-itemel-dropdown-item iconel-icon-circle-plus-outline螺蛳粉/el-dropdown-itemel-dropdown-item iconel-icon-check双皮奶/el-dropdown-itemel-dropdown-item iconel-icon-circle-check蚵仔煎/el-dropdown-item/el-dropdown-menu/el-dropdownh3click 激活/h3el-dropdown triggerclickspan classel-dropdown-link下拉菜单i classel-icon-arrow-down el-icon--right/i/spanel-dropdown-menu slotdropdownel-dropdown-item iconel-icon-plus黄金糕/el-dropdown-itemel-dropdown-item iconel-icon-circle-plus狮子头/el-dropdown-itemel-dropdown-item iconel-icon-circle-plus-outline螺蛳粉/el-dropdown-itemel-dropdown-item iconel-icon-check双皮奶/el-dropdown-itemel-dropdown-item iconel-icon-circle-check蚵仔煎/el-dropdown-item/el-dropdown-menu/el-dropdownh3指令事件/h3el-dropdown commandhandleCommandspan classel-dropdown-link下拉菜单i classel-icon-arrow-down el-icon--right/i/spanel-dropdown-menu slotdropdownel-dropdown-item commanda黄金糕/el-dropdown-itemel-dropdown-item commandb狮子头/el-dropdown-itemel-dropdown-item commandc螺蛳粉/el-dropdown-itemel-dropdown-item commandd disabled双皮奶/el-dropdown-itemel-dropdown-item commande divided蚵仔煎/el-dropdown-item/el-dropdown-menu/el-dropdownh3结合头像/h3el-dropdown commandhandleCommandspan classel-dropdown-linkel-avatar sizemedium srchttps://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg/el-avatar/spanel-dropdown-menu slotdropdownel-dropdown-item commanda黄金糕/el-dropdown-itemel-dropdown-item commandb狮子头/el-dropdown-itemel-dropdown-item commandc螺蛳粉/el-dropdown-itemel-dropdown-item commandd disabled双皮奶/el-dropdown-itemel-dropdown-item commande divided蚵仔煎/el-dropdown-item/el-dropdown-menu/el-dropdown/div
/templatescript
export default {name: HomeView,methods: {handleCommand(command) {this.$message(click on item command);}}
};
/script
style
.el-dropdown-link {cursor: pointer;color: #409eff;
}
.el-icon-arrow-down {font-size: 12px;
}
.demonstration {display: block;color: #8492a6;font-size: 14px;margin-bottom: 20px;
}
/styleSteps 步骤条
el-steps 定义流程完成任务的分步导航条。
active当前激活步骤numberspace每个 step 的间距不填写将自适应间距。支持百分比。它接受 Number单位为px。finish-status结束步骤的状态wait / process / finish / error / successdirection显示方向vertical / horizontal
el-step 定义单步内容
title标题description描述性文字icon图标status当前步骤的状态不设置则根据 steps 确定状态wait / process / finish / error / success
templatedivh3简单步骤/h3el-steps :activeactive finish-statussuccessel-step title步骤 1/el-stepel-step title步骤 2/el-stepel-step title步骤 3/el-step/el-stepsel-button stylemargin-top: 12px clicknext下一步/el-buttonh3有描述的步骤条/h3el-steps :active2el-step title步骤1 description这是一段很长很长很长的描述性文字/el-stepel-step title步骤2 description这是一段很长很长很长的描述性文字/el-stepel-step title步骤3 description这是一段很长很长很长的描述性文字/el-step/el-stepsh3带图标的步骤条/h3el-steps :active1el-step title步骤 1 iconel-icon-edit/el-stepel-step title步骤 2 iconel-icon-upload/el-stepel-step title步骤 3 iconel-icon-picture/el-step/el-stepsh3竖式步骤条/h3el-steps :active2 directionvertical :space100el-step title步骤 1 iconel-icon-edit/el-stepel-step title步骤 2 iconel-icon-upload/el-stepel-step title步骤 3 iconel-icon-picture description这是一段很长很长很长的描述性文字/el-step/el-steps/div
/template
script
export default {name: HomeView,data() {return {active: 0,};},methods: {next() {if (this.active 2) {this.active 0;}console.log(active, this.active);}}
};
/script3. 表单组件
表单组件是用于创建各种表单的控件集合包括单选框Radio、多选框Checkbox、输入框Input、选择器Select、开关Switch、滑块Slider、时间选择器Time Picker、日期选择器Date Picker、评分Rate、穿梭框Transfer等。
Radio 单选框
el-radio 使用单选框el-radio-group 为单选框分组。el-radio-button 提供 按钮样式。
templatedivel-rowh3单选框/h3el-radio v-modelradio label1备选项1/el-radioel-radio v-modelradio label2备选项2/el-radio/el-rowel-rowh3单选框组/h3el-radio-group v-modelradio1el-radio :label3备选项1/el-radioel-radio :label6备选项2/el-radioel-radio :label9备选项3/el-radio/el-radio-group/el-rowel-rowh3按钮样式单选框组/h3el-radio-group v-modelradio2 sizemediumel-radio-button label上海/el-radio-buttonel-radio-button label北京/el-radio-buttonel-radio-button label广州/el-radio-buttonel-radio-button label深圳/el-radio-button/el-radio-group/el-rowel-button typeprimary plain clickdispaly() stylemargin:5px;显示单选框值/el-button/div
/templatescript
export default {name: HomeView,data() {return {radio: ,radio1: ,radio2: ,};},methods: {dispaly() {console.log(radio, this.radio);console.log(radio1, this.radio1);console.log(radio2, this.radio2);}}
};
/script
style
.el-row {margin: 1px 5px;;
}
/style要使用 Radio 组件必须设置 v-model 绑定变量选中意味着变量的值为相应 Radio label 属性的值label 可以是 String、Number 或 Boolean。 结合 el-radio-group 元素和子元素 el-radio 可以实现单选组在 el-radio-group 中绑定 v-model在 el-radio 中设置好 label 即可无需再给每一个 el-radio 绑定变量。 常用属性
value / v-model绑定值string / number / booleanlabelRadio 的 valuestring / number / booleandisabled是否禁用booleanborder是否显示边框booleansizeRadio 的尺寸仅在 border 为真时有效
Checkbox 多选框
el-checkbox 元素中定义 v-model 绑定变量单一的 checkbox 中默认绑定变量的值会是 Boolean选中为 true。
el-checkbox-group能把多个 checkbox 管理为一组只需要在 Group 中使用 v-model 绑定 Array 类型的变量即可。label 属性是该 checkbox 对应的值。
el-checkbox-button 提供 按钮样式。
templatedivel-rowh3多选框/h3el-checkbox v-modelchecked备选项/el-checkbox/el-rowel-rowh3多选框组/h3el-checkbox-group v-modelcheckListel-checkbox label复选框 A/el-checkboxel-checkbox label复选框 B/el-checkboxel-checkbox label复选框 C/el-checkbox/el-checkbox-group/el-rowel-rowh3全选/h3el-checkbox :indeterminateisIndeterminate v-modelcheckAll changehandleCheckAllChange全选/el-checkboxdiv stylemargin: 15px 0/divel-checkbox-group v-modelcheckedCities changehandleCheckedCitiesChangeel-checkbox v-forcity in cities :labelcity :keycity{{city}}/el-checkbox/el-checkbox-group/el-rowel-rowh3限制数量多选框/h3el-checkbox-group v-modelcheckedCities2 :min1 :max2el-checkbox v-forcity in cities :labelcity :keycity{{city}}/el-checkbox/el-checkbox-group/el-rowel-rowh3按钮样式多选框/h3el-checkbox-group v-modelcheckboxGroup1el-checkbox-button v-forcity in cities :labelcity :keycity{{city}}/el-checkbox-button/el-checkbox-group/el-rowel-button typeprimary plain clickdispaly() stylemargin:5px;显示单选框值/el-button/div
/templatescript
export default {name: HomeView,data() {return {checked: true,checkList: [],checkAll: false,checkedCities: [],checkedCities2: [],checkboxGroup1: [],cities: [上海, 北京, 广州, 深圳],isIndeterminate: true,};},methods: {handleCheckAllChange(val) {this.checkedCities val ? this.cities : [];this.isIndeterminate false;},handleCheckedCitiesChange(value) {let checkedCount value.length;this.checkAll checkedCount this.cities.length;this.isIndeterminate checkedCount 0 checkedCount this.cities.length;},dispaly() {console.log(checked, this.checked);console.log(checkList, this.checkList);console.log(checkAll, this.checkAll);console.log(checkedCities, this.checkedCities);console.log(checkedCities2, this.checkedCities2);console.log(checkboxGroup1, this.checkboxGroup1);},},
};
/script
style
.el-row {margin: 5px;
}
/styleindeterminate 属性用以表示 checkbox 的不确定状态一般用于实现全选的效果 常用属性
value / v-model绑定值string / number / booleanlabel选中状态的值string / number / booleandisabled是否禁用booleanborder是否显示边框booleansizeCheckbox 的尺寸仅在 border 为真时有效indeterminate设置 indeterminate 状态只负责样式控制
常用方法
change当绑定值变化时触发的事件回调参数更新后的值
handleCheckAllChange(val) {console.log(val,val)this.checkedCities val ? this.cities : [];this.isIndeterminate false;
},
handleCheckedCitiesChange(value) {console.log(value,value)let checkedCount value.length;this.checkAll checkedCount this.cities.length;this.isIndeterminate checkedCount 0 checkedCount this.cities.length;
}handleCheckAllChange(val) 中 val 打印点击更新后 v-modelcheckAll 的 checkAll 值 handleCheckedCitiesChange(value) 中 value 打印点击更新后 v-modelcheckedCities 的 checkedCities 值
Input 输入框
通过鼠标或键盘输入字符el-input 必须使用 v-model 绑定变量否则输入框内显示的值将不会改变。
templatedivh3基础用法/h3el-rowel-input placeholder请输入内容 v-modelinputContext clearable/el-input/el-rowel-rowel-input placeholder请输入内容 v-modelinputContext1 show-password/el-input/el-rowh3带 icon 的输入框/h3el-rowdiv classdemo-input-suffix属性方式el-input placeholder请选择日期 v-modelinput1suffix-iconel-icon-date/el-inputel-input placeholder请输入内容 v-modelinput2prefix-iconel-icon-search/el-input/divdiv classdemo-input-suffixslot 方式el-input placeholder请选择日期 v-modelinput3i slotsuffix classel-input__icon el-icon-date/i/el-inputel-input placeholder请输入内容 v-modelinput4i slotprefix classel-input__icon el-icon-search/i/el-input/div/el-rowh3文本域/h3el-rowel-input typetextarea placeholder请输入内容 v-modeltextarea:rows2/el-inputel-input typetextarea placeholder请输入内容 v-modeltextarea1autosize/el-inputel-input typetextarea placeholder请输入内容 v-modeltextarea2:autosize{ minRows: 2, maxRows: 4 }/el-input/el-rowh3复合型输入框/h3el-rowdivel-input placeholder请输入内容 v-modelinput5template slotprependHttp:///template/el-input/divdiv stylemargin-top: 5el-input placeholder请输入内容 v-modelinput6template slotappend.com/template/el-input/divdiv stylemargin-top: 5pxel-input placeholder请输入内容 v-modelinput7classinput-with-selectel-select v-modelselect placeholder请选择 slotprependel-option label餐厅名 value1/el-optionel-option label订单号 value2/el-optionel-option label用户电话 value3/el-option/el-selectel-button slotappend iconel-icon-search/el-button/el-input/div/el-rowh3输入长度限制/h3el-rowel-input typetext placeholder请输入内容 v-modeltextLimitmaxlength10show-word-limit/el-inputel-input typetextarea placeholder请输入内容 v-modeltextareaLimitmaxlength30show-word-limit/el-input/el-rowel-button typeprimary plain clickdispaly() stylemargin:5px;显示单选框值/el-button/div
/templatescript
export default {name: HomeView,data() {return {inputContext: ,inputContext1: ,input1: ,input2: ,input3: ,input4: ,textarea: ,textarea1: ,textarea2: ,input5: ,input6: ,input7: ,select: ,textLimit: ,textareaLimit: ,};},methods: {dispaly() {console.log(inputContext, this.inputContext);console.log(inputContext1, this.inputContext1);console.log(input1, this.input1);console.log(textarea, this.textarea);console.log(input5, this.input5);console.log(input7, this.input7);console.log(select, this.select);console.log(textLimit, this.textLimit);}},
};
/script
style
.el-row {margin: 5px;
}
.el-input {width: 270px;
}
.el-select .el-input {width: 90px;
}
/style带输入建议
el-autocomplete 是一个可带输入建议的输入框组件fetch-suggestions 是一个返回输入建议的方法属性如 querySearch(queryString, cb)在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 el-autocomplete 组件中。
templatedivdiv classsub-title激活即列出输入建议/divel-autocompleteclassinline-inputv-modelstate:fetch-suggestionsquerySearchplaceholder请输入内容selecthandleSelect/el-autocompleteel-button typeprimary plain clickdispaly()显示选中值/el-button/div
/templatescript
export default {name: HomeView,data() {return {state: ,restaurants: []};},methods: {querySearch(queryString, cb) {var restaurants this.restaurants;var results queryString ? restaurants.filter((restaurant) restaurant.value .toLowerCase() .indexOf(queryString.toLowerCase()) 0): restaurants;// 调用 callback 返回建议列表的数据cb(results);},handleSelect(item) {console.log(item);},loadAll() {return [{ value: 三全鲜食北新泾店, address: 长宁区新渔路144号 },{ value: Hot honey 首尔炸鸡仙霞路, address: 上海市长宁区淞虹路661号},{ value: 新旺角茶餐厅, address: 上海市普陀区真北路988号创邑金沙谷6号楼113},{ value: 泷千家(天山西路店), address: 天山西路438号 },{ value: NONO JUICE 鲜榨果汁, address: 上海市长宁区天山西路119号 },{ value: CoCo都可(北新泾店, address: 上海市长宁区仙霞西路 },{ value: 豪大大炸鸡, address: 长宁区淞虹路891号},{ value: 港式小铺, address: 上海市长宁区金钟路968号15楼15-105室 },{ value: 蜀香源麻辣香锅剑河路店, address: 剑河路443-1 },];},dispaly() {console.log(state, this.state);}},mounted() {// 此处可以 axios 动态获取this.restaurants this.loadAll();},
};
/script点击 “豪大大炸鸡”触发 handleSelect(item) 方法将选中项对象输出。 点击 “显示选中值”输出 v-modelstate 绑定的 state 即选中项的 value 使用 slot-scope 自定义输入建议的模板。该 scope 的参数为 item表示当前输入建议对象。
templatedivdiv classsub-title激活即列出输入建议/divel-autocompleteclassinline-inputv-modelstate:fetch-suggestionsquerySearchplaceholder请输入内容selecthandleSelecticlassel-icon-edit el-input__iconslotsuffixclickhandleIconClick/itemplate slot-scope{ item }div styletext-overflow: ellipsis; overflow: hidden{{ item.value }}/divspan stylefont-size: 12px; color: #b4b4b4{{ item.address }}/span/template/el-autocompleteel-button typeprimary plain clickdispaly()显示选中值/el-button/div
/templatescript
export default {name: HomeView,data() {return {state: ,restaurants: [],};},methods: {querySearch(queryString, cb) {var restaurants this.restaurants;var results queryString ? restaurants.filter((restaurant) restaurant.value .toLowerCase() .indexOf(queryString.toLowerCase()) 0): restaurants;// 调用 callback 返回建议列表的数据cb(results);},handleSelect(item) {console.log(item);},handleIconClick(ev) {console.log(ev);},loadAll() {return [{ value: 三全鲜食北新泾店, address: 长宁区新渔路144号 },{ value: Hot honey 首尔炸鸡仙霞路, address: 上海市长宁区淞虹路661号 },{ value: 新旺角茶餐厅, address: 上海市普陀区真北路988号创邑金沙谷6号楼113, },{ value: 泷千家(天山西路店), address: 天山西路438号 },{ value: NONO JUICE 鲜榨果汁, address: 上海市长宁区天山西路119号 },{ value: CoCo都可(北新泾店, address: 上海市长宁区仙霞西路 },{ value: 豪大大炸鸡, address: 长宁区淞虹路891号},{ value: 港式小铺, address: 上海市长宁区金钟路968号15楼15-105室 },{ value: 蜀香源麻辣香锅剑河路店, address: 剑河路443-1 },];},dispaly() {console.log(state, this.state);},},mounted() {// 此处可以 axios 动态获取this.restaurants this.loadAll();},
};
/script常用属性
type类型texttextarea 和其他 原生 input 的 type 值value / v-model绑定值string / numberdisabled是否禁用booleanplaceholder输入框占位文本stringshow-word-limit是否显示输入字数统计clearable是否可清空booleanshow-password是否显示切换密码图标booleansize输入框尺寸medium / small / miniprefix-icon输入框头部图标suffix-icon输入框尾部图标
常用插槽Slots
prefix输入框头部内容suffix输入框尾部内容prepend输入框前置内容append输入框后置内容
常用方法
change仅在输入框失去焦点或用户按下回车时触发回调参数(value: string | number)clear在点击由 clearable 属性生成的清空按钮时触发
el-autocomplete 带输入建议输入框常用属性、插槽、方法见ElementUI-Input 输入框
InputNumber 计数器
el-input-number 组件生成计数器必须使用 v-model 绑定变量。
templatedivel-rowh3基础用法/h3el-input-number v-modelnum changehandleChange :min1 :max10 label描述文字/el-input-number/el-rowel-rowh3定义步数/h3el-input-number v-modelnum1 :step2/el-input-number/el-rowel-rowh3精度/h3el-input-number v-modelnum2 :precision2 :step0.1 :max10/el-input-number/el-rowel-rowh3按钮位置/h3el-input-number v-modelnum3 controls-positionright changehandleChange :min1 :max10/el-input-number/el-rowel-button typeprimary plain clickdispaly() stylemargin:5px;显示单选框值/el-button/div
/templatescript
export default {name: HomeView,data() {return {num: 1,num1: 1,num2: 1.0,num3: 1,};},methods: {handleChange(value) {console.log(value);},dispaly() {console.log(num, this.num);console.log(num1, this.num1);console.log(num2, this.num2);console.log(num3, this.num3);},},
};
/script常用属性
value / v-model绑定值numberdisabled是否禁用booleanmin设置计数器允许的最小值numbermax设置计数器允许的最大值numberstep计数器步长numberprecision数值精度numbersize计数器尺寸large, smallcontrols-position控制按钮位置rightplaceholder输入框默认 placeholder
常用方法
change绑定值被改变时触发回调参数currentValue, oldValue
Select 选择器
el-select 定义下拉菜单展示并选择内容v-model 的值为当前被选中的 el-option 的 value 属性值。
templatedivh3基础单选/h3el-select v-modelvalue placeholder请选择 clearableel-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value:disableditem.disabled/el-option/el-selecth3基础多选/h3el-select v-modelvalue1 placeholder请选择 clearable multipleel-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value:disableditem.disabled/el-option/el-selecth3自定义模板/h3el-select v-modelvalue2 placeholder请选择 clearableel-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value:disableditem.disabledspan stylefloat: left{{ item.label }}/spanspan stylefloat: right; color: #8492a6; font-size: 13px{{ item.value }}/span/el-option/el-selecth3可搜索/h3el-select v-modelvalue3 placeholder请选择 filterableel-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value/el-option/el-selectel-button typeprimary plain clickdispaly()显示选中值/el-button/div
/templatescript
export default {name: HomeView,data() {return {options: [{ value: 选项1, label: 黄金糕 },{ value: 选项2, label: 双皮奶, disabled: true },{ value: 选项3, label: 蚵仔煎 },{ value: 选项4, label: 阿姨奶茶 },{ value: 选项5, label: 北京烤鸭 },],value: ,value1: [],value2: ,value3: []};},methods: {dispaly() {console.log(value, this.value);console.log(value1, this.value1);console.log(value2, this.value2);console.log(value3, this.value3);}}
};
/scriptel-select 添加 filterable 属性即可启用 搜索 功能。默认情况下Select 会找出所有 label 属性包含输入值的选项。如果希望使用其他的搜索逻辑可以通过传入一个 filter-method 来实现。filter-method 为一个 Function它会在输入值发生变化时调用参数为当前输入值。
启用远程搜索需要将 filterable 和 remote 设置为 true同时传入一个 remote-method。remote-method 为一个 Function它会在输入值发生变化时调用参数为当前输入值。
templatedivh3远程搜索/h3el-select v-modelvalue placeholder请输入关键词filterableremotereserve-keyword:remote-methodremoteMethod:loadingloadingel-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value/el-option/el-selectel-button typeprimary plain clickdispaly()显示选中值/el-button/div
/templatescript
export default {name: HomeView,data() {return {value: [],list: [],options: [],loading: false,};},methods: {remoteMethod(query) {if (query ! ) {this.loading true;setTimeout(() {this.loading false;this.options this.list.filter((item) {return item.label.toLowerCase().indexOf(query.toLowerCase()) -1;});}, 200);} else {this.options [];}},dispaly() {console.log(value, this.value);},loadAll() {// 模拟远程调用返回结果集return [{ value: 选项1, label: 黄金糕 },{ value: 选项2, label: 双皮奶 },{ value: 选项3, label: 蚵仔煎 },{ value: 选项4, label: 龙须面 },{ value: 选项5, label: 阿姨奶茶 },];},},mounted() {// 此处可以 axios 动态获取this.list this.loadAll();},
};
/script常用属性
value / v-model绑定值boolean / string / numberdisabled是否禁用booleanclearable是否可以清空选项booleanplaceholder占位符stringmultiple是否多选booleanmultiple-limit多选时用户最多可以选择的项目数numbersize输入框尺寸medium/small/minifilterable是否可搜索booleanfilter-method自定义搜索方法functionremote是否为远程搜索booleanremote-method远程搜索方法function
常用方法
change选中值发生变化时触发回调参数目前的选中值
Cascader 级联选择器
当一个数据集合有清晰的层级结构时el-cascader 提供级联选择器逐级查看并选择。
templatedivh3默认 click 触发子菜单/h3el-cascaderv-modelvalue:optionsoptionschangehandleChangeclearable/el-cascaderh3hover 触发子菜单/h3el-cascaderv-modelvalue1:optionsoptions:props{ expandTrigger: hover }changehandleChangeclearable/el-cascaderh3仅显示最后一级/h3el-cascaderv-modelvalue2:optionsoptions:show-all-levelsfalsechangehandleChange/el-cascaderh3多选/h3el-cascaderv-modelvalue3:optionsoptions:props{ multiple: true }changehandleChangeclearable/el-cascaderh3选择任意一级选项/h3el-cascaderv-modelvalue4:optionsoptions:props{ multiple: true, checkStrictly: true }changehandleChangeclearable/el-cascaderel-button typeprimary plain clickdispaly()显示选中值/el-button/div
/templatescript
export default {name: HomeView,data() {return {value: [],value1: [],value2: [],value3: [],value4: [],options: [{value: anhui,label: 安徽省,children: [{value: hefei,label: 合肥市,children: [{ value: shushan, label: 蜀山区 },{ value: zhengwu, label: 政务区 },{ value: jingkai, label: 经开区 },],},{value: anqing,label: 安庆市,children: [{ value: daguan, label: 大观区 },{ value: yixiu, label: 宜秀区 },],},],},{value: jiangsu,label: 江苏省,children: [{value: nanjing,label: 南京市,children: [{ value: xuanwu, label: 玄武区 },{ value: qinhuai, label: 秦淮区 },{ value: jianye, label: 建邺区 },],},{value: suzhou,label: 苏州市,children: [{ value: gusu, label: 姑苏区 },{ value: huqiong, label: 虎丘区 },],},],},{value: zhejiang,label: 浙江省,children: [{value: hangzhou,label: 杭州市,children: [{ value: shangcheng, label: 上城区 },{ value: xiacheng, label: 下城区 },],},{value: ningbo,label: 宁波市,children: [{ value: jiangbei, label: 江北区 },{ value: zhenhai, label: 镇海区 },],},],},],};},methods: {handleChange(val) {console.log(val);},dispaly() {console.log(value, this.value);console.log(value1, this.value1);console.log(value2, this.value2);console.log(value3, this.value3);console.log(value4, this.value4);},},
};
/scriptel-cascader 添加 filterable 属性即可启用 搜索 功能默认会匹配节点的 label 或所有父节点的 label (由 show-all-levels 决定)中包含输入值的选项。你也可以用 filter-method 自定义搜索逻辑接受一个 Function第一个参数是节点 node第二个参数是搜索关键词 keyword通过返回布尔值表示是否命中。
常用属性、插槽、方法见 Cascader 级联选择器
Switch 开关
el-switch 表示两种相互对立的状态间的切换多用于触发「开/关」。
templatedivh3Switch 开关/h3el-switch v-modelvalue /el-switchh3设置开关的背景色/h3el-switch v-modelvalue1 active-color#13ce66 inactive-color#ff4949/el-switchh3文字描述/h3el-switch v-modelvalue2 active-color#13ce66 inactive-color#ff4949 active-text按月付费 inactive-text按年付费/el-switchh3自定义 value 类型/h3el-switch v-modelvalue3 active-color#13ce66 inactive-color#ff4949 active-value100 inactive-value0/el-switchel-rowel-button typeprimary plain clickdispaly()显示选中值/el-button/el-row/div
/templatescript
export default {name: HomeView,data() {return {value: true,value1: true,value2: true,value3: 100,};},methods: {dispaly() {console.log(value, this.value);console.log(value1, this.value1);console.log(value2, this.value2);console.log(value3, this.value3);},},
};
/scriptDatePicker 日期选择器
el-date-picker 用于选择或输入日期
templatedivh3日期选择器/h3el-date-picker v-modelvalue1 typedate placeholder选择日期/el-date-pickerh3带快捷选项/h3el-date-picker v-modelvalue2 typedate placeholder选择日期 :picker-optionspickerOptions /el-date-pickerh3周/h3el-date-picker v-modelvalue3 typeweek placeholder选择周 formatyyyy 第 WW 周 /el-date-pickerh3设置周一为周启始日期/h3el-date-picker v-modelvalue4 typeweek placeholder选择周 formatyyyy 第 WW 周 :picker-optionspickerOptions2value-formatyyyy-MM-ddchangehandleChange /el-date-pickerh3月/h3el-date-picker v-modelvalue5 typemonth placeholder选择月/el-date-pickerh3年/h3el-date-picker v-modelvalue6 typeyear placeholder选择年/el-date-pickerh3多个日/h3el-date-picker v-modelvalue7 typedates placeholder选择一个或多个日期/el-date-pickerh3多个月/h3el-date-picker v-modelvalue8 typemonths placeholder选择一个或多个月/el-date-pickerh3多个年/h3el-date-picker v-modelvalue9 typeyears placeholder选择一个或多个年/el-date-pickerh3日期范围/h3el-date-picker v-modelvalue10 typedaterangerange-separator至start-placeholder开始日期end-placeholder结束日期/el-date-pickerh3月份范围/h3el-date-picker v-modelvalue11 typemonthrangerange-separator至start-placeholder开始月份end-placeholder结束月份/el-date-pickerh3日期格式/h3el-date-picker v-modelvalue12 typedate placeholder选择日期 formatyyyy 年 MM 月 dd 日value-formatyyyy-MM-dd/el-date-pickerh3时间戳/h3el-date-picker v-modelvalue13 typedate placeholder选择日期formatyyyy 年 MM 月 dd 日value-formattimestamp/el-date-pickerel-rowel-button typeprimary plain clickdispaly()显示选中值/el-button/el-row/div
/templatescript
export default {name: HomeView,data() {return {value1: ,value2: ,value3: ,value4: ,value5: ,value6: ,value7: ,value8: ,value9: ,value10: ,value11: ,value12: ,value13: ,pickerOptions: {disabledDate(time) {return time.getTime() Date.now();},shortcuts: [{text: 今天,onClick(picker) {picker.$emit(pick, new Date());},},{text: 昨天,onClick(picker) {const date new Date();date.setTime(date.getTime() - 3600 * 1000 * 24);picker.$emit(pick, date);},},{text: 一周前,onClick(picker) {const date new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);picker.$emit(pick, date);},},],},pickerOptions2: {firstDayOfWeek: 1,},};},methods: {// 周从周一开始日期起始日期多一天进行调整handleChange(e) {let d new Date(e);d.setDate(d.getDate() - 1);let monday this.getDateFormate(d);console.log(选择的周一 , monday);d.setDate(d.getDate() 6);let sunday this.getDateFormate(d);console.log(选择的周日 , sunday)},getDateFormate(d) {let year d.getFullYear();let month (d.getMonth() 1).toString().padStart(2,0);let date d.getDate().toString().padStart(2,0);let dateStr year - month - date;return dateStr;},dispaly() {console.log(value1 , this.value1 );console.log(value2 , this.value2 );console.log(value3 , this.value3 );console.log(value4 , this.value4 );console.log(value5 , this.value5 );console.log(value6 , this.value6 );console.log(value7 , this.value7 );console.log(value8 , this.value8 );console.log(value9 , this.value9 );console.log(value10, this.value10);console.log(value11, this.value11);console.log(value12, this.value12);console.log(value13, this.value13);},},
};
/scripttype 属性指定日期类型picker-options 对象用于自定义选项unlink-panels 属性解除日期范围的联动format 指定输入框的格式value-format 指定绑定值的格式。
常用属性、插槽、方法见 DatePicker 日期选择器
DateTimePicker 日期时间选择器
DateTimePicker 由 DatePicker 和 TimePicker 派生Picker Options 或者其他选项可以参照 DatePicker 和 TimePicker。
templatedivh3日期时间选择器/h3el-date-picker v-modelvalue1 typedatetime placeholder选择日期时间/el-date-pickerh3带快捷选项/h3el-date-picker v-modelvalue2 typedatetime placeholder选择日期时间 :picker-optionspickerOptions /el-date-pickerh3设置默认时间/h3el-date-picker v-modelvalue3 typedatetime placeholder选择日期时间 default-time12:00:00 /el-date-pickerh3日期和时间范围/h3el-date-picker v-modelvalue4 typedatetimerangerange-separator至start-placeholder开始日期end-placeholder结束日期/el-date-pickerh3默认的起始与结束时刻/h3el-date-picker v-modelvalue5 typedatetimerangerange-separator至start-placeholder开始日期end-placeholder结束日期:default-time[00:00:00, 23:59:59]/el-date-pickerh3日期格式/h3el-date-picker v-modelvalue6 typedatetime placeholder选择日期时间 value-formatyyyy-MM-dd HH:mm:ss/el-date-pickerel-rowel-button typeprimary plain clickdispaly()显示选中值/el-button/el-row/div
/templatescript
export default {name: HomeView,data() {return {value1: ,value2: ,value3: ,value4: ,value5: ,value6: ,pickerOptions: {disabledDate(time) {return time.getTime() Date.now();},shortcuts: [{text: 今天,onClick(picker) {picker.$emit(pick, new Date());},},{text: 昨天,onClick(picker) {const date new Date();date.setTime(date.getTime() - 3600 * 1000 * 24);picker.$emit(pick, date);},},{text: 一周前,onClick(picker) {const date new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);picker.$emit(pick, date);},},],}};},methods: {dispaly() {console.log(value1 , this.value1 );console.log(value2 , this.value2 );console.log(value3 , this.value3 );console.log(value4 , this.value4 );console.log(value5 , this.value5 );console.log(value6 , this.value6 );},},
};
/scriptRate 评分
el-rate 评分组件
templatedivh3辅助文字/h3el-rate v-modelvalue1 :max10 show-text :textstexts /el-rateh3等级icon/h3el-ratev-modelvalue2:max10:icon-classesiconClassesvoid-icon-classel-icon-cloudy:colors[#99A9BF, #F7BA2A, #FF9900]/el-rateh3辅助文字 等级icon/h3el-ratev-modelvalue3:max10show-text :textstexts:icon-classesiconClassesvoid-icon-classel-icon-cloudy:colors[#99A9BF, #F7BA2A, #FF9900]/el-rateel-rowel-button typeprimary plain clickdispaly()显示选中值/el-button/el-row/div
/templatescript
export default {name: HomeView,data() {return {value1: null,value2: null,value3: null,texts: [ 极差, 极差, 失望, 失望, 一般, 一般, 满意, 满意, 非常满意, 非常满意 ],// iconClasses: [ el-icon-heavy-rain, el-icon-cloudy-and-sunny, el-icon-sunny],iconClasses:{ 4: el-icon-heavy-rain, 8: el-icon-cloudy-and-sunny, 10: el-icon-sunny }};},methods: {dispaly() {console.log(value1 , this.value1);console.log(value2 , this.value2);console.log(valu3e , this.value3);},},
};
/scriptTransfer 穿梭框
el-transfer 穿梭框
templatedivh3穿梭框/h3el-transfer v-modelvalue1 :datadata/el-transferh3可搜索/h3el-transferv-modelvalue2:datadatafilterable:filter-methodfilterMethodfilter-placeholder请输入城市/el-transferel-rowel-button typeprimary plain clickdispaly()显示选中值/el-button/el-row/div
/templatescript
export default {name: HomeView,data() {return {value1: [],value2: [],data: [{ key: 1, label: 北京 },{ key: 2, label: 上海 },{ key: 3, label: 广州 },{ key: 4, label: 深圳 },{ key: 5, label: 南京 },{ key: 6, label: 西安 },{ key: 7, label: 成都 },{ key: 8, label: 合肥 },],};},methods: {filterMethod(query, item) {return item.label.indexOf(query) -1;},dispaly() {console.log(value1 , this.value1);console.log(value2 , this.value2);}},
};
/script常用属性、插槽、方法见 Transfer 穿梭框
Form 表单
el-form 由输入框、选择器、单选框、多选框等控件组成用以收集、校验、提交数据。
templatedivel-form:modelruleFormrefruleFormlabel-width100px:rulesrulesel-form-item label活动名称 propnameel-input v-modelruleForm.name/el-input/el-form-itemel-form-item label活动区域 propregionel-select v-modelruleForm.region placeholder请选择活动区域el-option label区域一 valueshanghai/el-optionel-option label区域二 valuebeijing/el-option/el-select/el-form-itemel-form-item label活动时间 requiredel-col :span11el-form-item propdate1el-date-picker v-modelruleForm.date1 typedate placeholder选择日期 stylewidth: 100% /el-date-picker/el-form-item/el-colel-col classline :span2-/el-colel-col :span11el-form-item propdate2el-time-picker v-modelruleForm.date2 placeholder选择时间 stylewidth: 100% /el-time-picker/el-form-item/el-col/el-form-itemel-form-item label即时配送 propdeliveryel-switch v-modelruleForm.delivery/el-switch/el-form-itemel-form-item label活动性质 proptypeel-checkbox-group v-modelruleForm.typeel-checkbox label美食/餐厅线上活动 nametype/el-checkboxel-checkbox label地推活动 nametype/el-checkboxel-checkbox label线下主题活动 nametype/el-checkboxel-checkbox label单纯品牌曝光 nametype/el-checkbox/el-checkbox-group/el-form-itemel-form-item label特殊资源 propresourceel-radio-group v-modelruleForm.resourceel-radio label线上品牌商赞助/el-radioel-radio label线下场地免费/el-radio/el-radio-group/el-form-itemel-form-item label活动形式 propdescel-input typetextarea v-modelruleForm.desc/el-input/el-form-itemel-form-itemel-button typeprimary clicksubmitForm(ruleForm) 立即创建/el-button el-button clickresetForm(ruleForm)重置/el-button/el-form-item/el-form/div
/templatescript
export default {name: HomeView,data() {return {ruleForm: {name: ,region: ,date1: ,date2: ,delivery: false,type: [],resource: ,desc: ,},rules: {name: [{ required: true, message: 请输入活动名称, trigger: blur },{ min: 3, max: 5, message: 长度在 3 到 5 个字符, trigger: blur },],region: [{ required: true, message: 请选择活动区域, trigger: change }],date1: [{ type: date, required: true, message: 请选择日期, trigger: change}],date2: [{ type: date, required: true, message: 请选择时间, trigger: change}],type: [{type: array, required: true, message: 请至少选择一个活动性质, trigger: change}],resource: [{ required: true, message: 请选择活动资源, trigger: change }],desc: [{ required: true, message: 请填写活动形式, trigger: blur }]},};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) {if (valid) {alert(submit!);console.log(ruleForm, this.ruleForm);} else {console.log(error submit!!);return false;}});},resetForm(formName) {this.$refs[formName].resetFields();},},
};
/script在 el-form 组件中每一个表单域由一个 el-form-item 组件构成表单域中可以放置各种类型的表单控件包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。
el-form 组件提供了表单验证的功能只需要通过 rules 属性传入约定的验证规则并将 el-form-item 的 prop 属性设置为需校验的字段名即可。
还可以自定义验证方法
templatedivel-form:modelruleFormrefruleFormlabel-width100px:rulesrulesstatus-iconel-form-item label密码 proppassel-input typepassword v-modelruleForm.pass autocompleteoff /el-input/el-form-itemel-form-item label确认密码 propcheckPassel-input typepassword v-modelruleForm.checkPass autocompleteoff /el-input/el-form-itemel-form-item label年龄 propageel-input v-model.numberruleForm.age/el-input/el-form-itemel-form-itemel-button typeprimary clicksubmitForm(ruleForm)提交/el-buttonel-button clickresetForm(ruleForm)重置/el-button/el-form-item/el-form/div
/templatescript
export default {name: HomeView,data() {return {ruleForm: {pass: ,checkPass: ,age: },rules: {pass: [{ validator: this.validatePass, trigger: blur }],checkPass: [{ validator: this.validatePass2, trigger: blur }],age: [{ validator: this.checkAge, trigger: blur }]},};},methods: {validatePass(rule, value, callback) {if (value ) {callback(new Error(请输入密码));} else {if (this.ruleForm.checkPass ! ) {this.$refs.ruleForm.validateField(checkPass);}callback();}},validatePass2(rule, value, callback) {if (value ) {callback(new Error(请再次输入密码));} else if (value ! this.ruleForm.pass) {callback(new Error(两次输入密码不一致!));} else {callback();}},checkAge(rule, value, callback) {if (!value) {return callback(new Error(年龄不能为空));} else{if (value 18) {callback(new Error(必须年满18岁));} else {callback();}}},submitForm(formName) {this.$refs[formName].validate((valid) {if (valid) {alert(submit!);console.log(ruleForm, this.ruleForm);} else {console.log(error submit!!);return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}}
};
/script4. 数据展示组件
数据展示组件用于展示和操作数据包括表格Table、标签Tag、进度条Progress、树形控件Tree、分页Pagination、标记Badge、头像Avatar、结果Result等。
Table 表格
el-table 中注入 :data 对象数组后el-table-column 中用 prop 属性来对应对象中的键名即可填入数据用 label 属性来定义表格的列名。可以使用 width 属性来定义列宽。
stripe可以创建带斑马纹的表格。border可以创建边框。default-sort设置默认的排序列和排序顺序。formatter它用于格式化指定列的值接受一个 Function会传入两个参数row 和 column可以根据自己的需求进行处理。
templatedivel-table:datatableDatastylewidth: 100%stripeborder:default-sort{ prop: date, order: descending }el-table-column propdate label日期 width180 sortable/el-table-columnel-table-column propname label姓名 width180 sortable/el-table-columnel-table-column label地址 :formatterformatter /el-table-columnel-table-column fixedright label操作 width100template slot-scopescopeel-button clickhandleClick(scope.row) typetext sizesmall查看/el-buttonel-button typetext sizesmall编辑/el-button/template/el-table-column/el-table/div
/templatescript
export default {name: HomeView,data() {return {tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,},{date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1517 弄,},{date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄,},{date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1516 弄,}]}},methods: {handleClick(row) {console.log(row);},formatter(row, column) {return row.address;}}
};
/script实现多选非常简单: 手动添加一个 el-table-column设 type 属性为 selection 即可通过 selection-change 接受一个 Function传入被选中的所有 row。
templatedivel-table:datatableDatastylewidth: 100%stripeborderrefmultipleTableselection-changehandleSelectionChangeel-table-column typeselection width55 /el-table-columnel-table-column propdate label日期 width180 /el-table-columnel-table-column propname label姓名 width180 /el-table-columnel-table-column propaddress label地址 show-overflow-tooltip/el-table-columnel-table-column fixedright label操作 width100template slot-scopescopeel-button clickhandleClick(scope.row) typetext sizesmall查看/el-buttonel-button typetext sizesmall编辑/el-button/template/el-table-column/el-table/div
/templatescript
export default {name: HomeView,data() {return {multipleSelection: ,tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,},{date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1517 弄,},{date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄,},{date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1516 弄,}]}},methods: {handleClick(row) {console.log(row);},handleSelectionChange(val) {console.log(val);this.multipleSelection val;}}
};
/script通过设置 typeexpand 和 slot-scope 可以开启展开行功能el-table-column 的模板会被渲染成为展开行的内容。
templatedivel-table :datatableData stylewidth: 100%el-table-column typeexpandtemplate slot-scopescopeel-form label-positionleft inline classdemo-table-expandel-form-item label商品名称span{{ scope.row.name }}/span/el-form-itemel-form-item label所属店铺span{{ scope.row.shop }}/span/el-form-itemel-form-item label商品 IDspan{{ scope.row.id }}/span/el-form-itemel-form-item label店铺 IDspan{{ scope.row.shopId }}/span/el-form-itemel-form-item label商品分类span{{ scope.row.category }}/span/el-form-itemel-form-item label店铺地址span{{ scope.row.address }}/span/el-form-itemel-form-item label商品描述span{{ scope.row.desc }}/span/el-form-item/el-form/template/el-table-columnel-table-column label商品 ID propid /el-table-columnel-table-column label商品名称 propname /el-table-columnel-table-column label描述 propdesc /el-table-column/el-table/div
/templatescript
export default {name: HomeView,data() {return {tableData: [{id: 12987122,name: 好滋好味鸡蛋仔,category: 江浙小吃、小吃零食,desc: 荷兰优质淡奶奶香浓而不腻,address: 上海市普陀区真北路,shop: 王小虎夫妻店,shopId: 10333,},{id: 12987123,name: 好滋好味鸡蛋仔,category: 江浙小吃、小吃零食,desc: 荷兰优质淡奶奶香浓而不腻,address: 上海市普陀区真北路,shop: 王小虎夫妻店,shopId: 10333,},{id: 12987125,name: 好滋好味鸡蛋仔,category: 江浙小吃、小吃零食,desc: 荷兰优质淡奶奶香浓而不腻,address: 上海市普陀区真北路,shop: 王小虎夫妻店,shopId: 10333,},{id: 12987126,name: 好滋好味鸡蛋仔,category: 江浙小吃、小吃零食,desc: 荷兰优质淡奶奶香浓而不腻,address: 上海市普陀区真北路,shop: 王小虎夫妻店,shopId: 10333,}]}}
};
/script
/script
style
.demo-table-expand {font-size: 0;
}
.demo-table-expand label {width: 90px;color: #99a9bf;
}
.demo-table-expand .el-form-item {margin-right: 0;margin-bottom: 0;width: 50%;
}
/styleProgress 进度条
el-progress 用于展示操作进度告知用户当前状态和预期。
templatedivel-progress :text-insidetrue :stroke-width26 :percentagepercentage/el-progressel-progress :text-insidetrue :stroke-width24 :percentage40 statussuccess/el-progressel-progress :text-insidetrue :stroke-width22 :percentagepercentage statuswarning/el-progressel-progress :text-insidetrue :stroke-width20 :percentage70 statusexception/el-progressel-progress typedashboard :percentagepercentage :colorcolors/el-progressdivel-button-groupel-button iconel-icon-minus clickdecrease/el-buttonel-button iconel-icon-plus clickincrease/el-button/el-button-group/div/div
/templatescript
export default {name: HomeView,data() {return {percentage: 50,colors: [{color: #f56c6c, percentage: 20},{color: #e6a23c, percentage: 40},{color: #6f7ad3, percentage: 60},{color: #1989fa, percentage: 80},{color: #5cb87a, percentage: 100}]};},methods: {increase() {this.percentage 10;if (this.percentage 100) {this.percentage 100;}},decrease() {this.percentage - 10;if (this.percentage 0) {this.percentage 0;}}}
};
/scriptTree 树形控件
el-tree 用清晰的层级结构展示信息可展开或折叠。props 可以省略默认label、children。node-click 接受一个 Function节点被点击时的回调共三个参数依次为传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
templatedivel-tree :datadata :propsdefaultProps node-clickhandleNodeClick/el-tree/div
/templatescript
export default {name: HomeView,data() {return {data: [{id: 1,label: 一级 1,children: [{id: 4,label: 二级 1-1,children: [{id: 9,label: 三级 1-1-1}, {id: 10,label: 三级 1-1-2}]}]}, {id: 2,label: 一级 2,children: [{id: 5,label: 二级 2-1}, {id: 6,label: 二级 2-2}]}, {id: 3,label: 一级 3,children: [{id: 7,label: 二级 3-1}, {id: 8,label: 二级 3-2}]}],defaultProps: {children: children,label: label}};},methods: {handleNodeClick(data) {console.log(data);}}
};
/scriptshow-checkbox设置节点可被选中。 default-expand-all树节点默认全部展开。 getCheckedNodes若节点可被选择即 show-checkbox 为 true则返回目前被选中的节点所组成的数组。接收两个 boolean 类型的参数1. 是否只是叶子节点默认值为 false 。 2. 是否包含半选节点默认值为 false。 getCheckedKeys若节点可被选择即 show-checkbox 为 true则返回目前被选中的节点的 key 所组成的数组。接收一个 boolean 类型的参数若为 true 则仅返回被选中的叶子节点的 keys默认值为 false。
templatedivel-tree:datadata:propsdefaultPropsnode-clickhandleNodeClickshow-checkboxdefault-expand-allnode-keyidreftree/el-treedivel-button clickgetCheckedNodesFun通过 node 获取/el-buttonel-button clickgetCheckedKeysFun通过 key 获取/el-button/div/div
/templatescript
export default {name: HomeView,data() {return {data: [{id: 1,label: 一级 1,children: [{id: 4,label: 二级 1-1,children: [{id: 9,label: 三级 1-1-1,},{id: 10,label: 三级 1-1-2,}]}]},{id: 2,label: 一级 2,children: [{id: 5,label: 二级 2-1,},{id: 6,label: 二级 2-2,}]},{id: 3,label: 一级 3,children: [{id: 7,label: 二级 3-1,},{id: 8,label: 二级 3-2,}]}],defaultProps: {children: children,label: label,}};},methods: {handleNodeClick(data) {console.log(data);},getCheckedNodesFun() {console.log(this.$refs.tree.getCheckedNodes());},getCheckedKeysFun() {console.log(this.$refs.tree.getCheckedKeys(true));},},
};
/script在需要对节点进行过滤时调用 Tree 实例的 filter 方法参数为关键字。需要注意的是此时需要设置 filter-node-method值为过滤函数。
通过 watch 监听输入框绑定值 filterText传参入 Tree 实例的 filter 方法该参数会在 filter-node-method 中作为第一个参数。
templatedivel-input placeholder输入关键字进行过滤 v-modelfilterText /el-inputel-tree:datadata:propsdefaultPropsnode-clickhandleNodeClickdefault-expand-all:filter-node-methodfilterNodereftree/el-tree/div
/templatescript
export default {name: HomeView,// 监听输入框内容watch: {filterText(val) {this.$refs.tree.filter(val);},},data() {return {filterText: ,data: [{id: 1,label: 一级 1,children: [{id: 4,label: 二级 1-1,children: [{id: 9,label: 三级 1-1-1,},{id: 10,label: 三级 1-1-2,}]}]},{id: 2,label: 一级 2,children: [{id: 5,label: 二级 2-1,},{id: 6,label: 二级 2-2,}]},{id: 3,label: 一级 3,children: [{id: 7,label: 二级 3-1,},{id: 8,label: 二级 3-2,}]}],defaultProps: {children: children,label: label,}};},methods: {handleNodeClick(data) {console.log(data);},filterNode(value, data) {if (!value) return true;return data.label.indexOf(value) ! -1;}},
};
/scriptPagination 分页
el-pagination 用于触发分页功能。设置 background 属性可以为分页按钮添加背景色。设置 layout表示需要显示的内容用逗号分隔布局元素会依次显示。
prev上一页next下一页pager页码列表sizes设置每页显示的页码数量total总条目数jumper跳页元素
templatedivh3完整功能/h3el-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagecurrentPage:page-sizes[100, 200, 300, 400]:page-sizepageSizelayouttotal, sizes, prev, pager, next, jumper:total400/el-paginationh3带有背景色的分页/h3el-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagecurrentPage:page-sizes[100, 200, 300, 400]:page-sizepageSizelayoutprev, pager, next, sizes, total:total400background/el-pagination/div
/templatescript
export default {name: HomeView,data() {return {currentPage: 3,pageSize: 100};},methods: {handleSizeChange(val) {this.pageSize val;console.log(每页 this.pageSize 条);},handleCurrentChange(val) {this.currentPage val;console.log(当前页: this.currentPage);}}
};
/scriptBadge 标记
el-badge 用于按钮、图标旁的数字或状态标记。
templatedivel-badge :valuecomment classitemel-button sizesmall评论/el-button/el-badgeel-badge :valuereply classitem typewarningel-button sizesmall回复/el-button/el-badgeel-badge is-dot classitem数据查询/el-badge/div
/templatescript
export default {name: HomeView,data() {return {comment: 12,reply: 2,};},
};
/script
style
.item {margin-top: 10px;margin-right: 40px;
}
/styleAvatar 头像
el-avatar 展示用户头像或事物信息。通过 shape 和 size 设置头像的形状和大小。
templatedivel-avatar :size50 :srccircleUrl/el-avatarel-avatar :size50 :srcsquareUrlshapesquare/el-avatarel-avatar sizelarge :srcsquareUrl shapesquare /el-avatarel-avatar sizemedium :srcsquareUrl shapesquare /el-avatarel-avatar sizesmall :srcsquareUrl shapesquare /el-avatar/div
/templatescript
export default {name: HomeView,data() {return {circleUrl: https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg,squareUrl: https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg};},
};
/script
style
.el-avatar {margin-right: 10px;;
}
/styleResult 结果
el-result 用于对用户的操作结果或者异常状态做反馈。通过插槽设置自定义页面
icon自定义图标title自定义标题subTitle自定义二级标题extra自定义底部额外区域
templateel-rowel-col :sm12 :lg6h3成功提示/h3el-result iconsuccess title成功提示 subTitle请根据提示进行操作template slotextrael-button typeprimary sizemedium返回/el-button/template/el-result/el-colel-col :sm12 :lg6h3错误提示/h3el-result iconerror title错误提示 subTitle请根据提示进行操作template slotextrael-button typeprimary sizemedium返回/el-button/template/el-result/el-colel-col :sm12 :lg6h3自定义内容/h3el-result title404 subTitle抱歉请求错误template sloticonel-imagesrchttps://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png/el-image/templatetemplate slotextrael-button typeprimary sizemedium返回/el-button/template/el-result/el-col/el-row
/templatescript
export default {name: HomeView,data() {return {};},
};
/script5. 反馈组件
反馈组件用于与用户进行交互提供即时反馈包括警告Alert、消息提示Message、消息弹窗MessageBox、通知Notification、对话框Dialog、抽屉Drawer等。
Alert 警告
el-alert 用于页面中展示提示信息。
type指定样式success、info、warning、error默认为 info。effect改变主题light、darkshow-icon显示 Alert 的 iconcenter文字水平居中description帮助你更好地介绍我们称之为辅助性文字。
templatedivh3基本用法/h3el-alert title成功提示的文案 typesuccess /el-alertel-alert title错误提示的文案 typeerror /el-alerth3主题/h3el-alert title成功提示的文案 typesuccess effectdark /el-alertel-alert title错误提示的文案 typeerror effectdark /el-alerth3带有 icon/h3el-alert title成功提示的文案 typesuccess show-icon /el-alertel-alert title错误提示的文案 typeerror show-icon /el-alerth3文字居中/h3el-alert title成功提示的文案 typesuccess show-icon center/el-alertel-alert title错误提示的文案 typeerror show-icon center /el-alerth3带有辅助性文字介绍/h3el-alert title成功提示的文案 typesuccess show-icondescription文字说明文字说明文字说明文字说明文字说明文字说明/el-alerth3自定义插槽/h3el-alert typesuccesstemplate slottitlei classel-icon-circle-check/i成功提示的文案/template/el-alert/div
/templatescript
export default {name: HomeView,data() {return {};},
};
/scriptMessage 消息提示
this.$message() 方法常用于主动操作后的反馈提示。
type指定样式success、info、warning、error默认为 info。showClose可以人工关闭center 文字水平居中dangerouslyUseHTMLString设置为 truemessage 就会被当作 HTML 片段处理。
templatedivh3基础用法/h3el-button :plaintrue clickopen1成功/el-buttonel-button :plaintrue clickopen2警告/el-buttonel-button :plaintrue clickopen3消息/el-buttonel-button :plaintrue clickopen4错误/el-buttonh3可关闭/h3el-button :plaintrue clickopen5成功/el-buttonh3文字居中/h3el-button :plaintrue clickopenCenter文字居中/el-buttonh3使用 HTML 片段/h3el-button :plaintrue clickopenHTML使用 HTML 片段/el-button/div
/templatescript
export default {name: HomeView,methods: {open1() {this.$message({message: 恭喜你这是一条成功消息,type: success,});},open2() {this.$message({message: 警告哦这是一条警告消息,type: warning,});},open3() {this.$message(这是一条消息提示);},open4() {this.$message.error(错了哦这是一条错误消息);},open5() {this.$message({showClose: true,message: 恭喜你这是一条成功消息,type: success,});},openCenter() {this.$message({message: 居中的文字,center: true,});},openHTML() {this.$message({dangerouslyUseHTMLString: true,message: strong这是 iHTML/i 片段/strong,type: success});}},
};
/scriptMessageBox 弹出框
MessageBox 弹出框实现的一套模态对话框组件用于 alert消息提示、confirm确认消息和 prompt提交内容适合展示较为简单的内容。如果需要弹出较为复杂的内容请使用 Dialog。
$alter提示弹出框只有一个确定按钮$confirm确认弹出框有两个按钮确定和取消分别返回 true 和 false$prompt提交弹出框确定取消输入框确定返回输入框的值不输入为空取消返回Null
消息提示
调用 $alert 方法即可打开消息提示接收了两个参数message 和 title。默认会返回一个 Promise 对象便于进行后续操作的处理。
templatedivel-button typetext clickopen点击打开 Message Box/el-button/div
/templatescript
export default {name: HomeView,methods: {open() {this.$alert(这是一段内容, 标题名称, {confirmButtonText: 确定,type: warning,}).then(() {this.$message({type: success,message: 删除成功!,});}).catch(() {this.$message({type: info,message: 已取消删除,});});}}
};
/script点击 “确认”弹出 “删除成功!”点击 “x”弹出 “已取消删除”。
确认消息
调用 $confirm 方法即可打开确认消息我们可以传入 options 作为第三个参数它是一个字面量对象。
templatedivel-button typetext clickopen点击打开 Message Box/el-button/div
/templatescript
export default {name: HomeView,methods: {open() {this.$confirm(此操作将永久删除该文件, 是否继续?, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(() {this.$message({type: success,message: 删除成功!,});}).catch(() {this.$message({type: info,message: 已取消删除,});});}}
};
/script点击 “确认”弹出 “删除成功!”点击 “x” 或者 “取消”弹出 “已取消删除”。
提交内容
调用 $prompt 方法即可打开提交内容提示可以用 inputPattern 字段自己规定匹配模式或者用 inputValidator 规定校验函数可以返回 Boolean 或 String返回 false 或字符串时均表示校验未通过同时返回的字符串相当于定义了 inputErrorMessage 字段。此外可以用 inputPlaceholder 字段来定义输入框的占位符。
templatedivel-button typetext clickopen点击打开 Message Box/el-button/div
/templatescript
export default {name: HomeView,methods: {open() {this.$prompt(请输入邮箱, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,inputPlaceholder: 请输入邮箱,inputPattern: /[\w!#$%*/?^_{|}~-](?:\.[\w!#$%*/?^_{|}~-])*(?:[\w](?:[\w-]*[\w])?\.)[\w](?:[\w-]*[\w])?/,inputErrorMessage: 邮箱格式不正确,type: warning}).then(({ value }) {this.$message({type: success,message: 你的邮箱是: value});}).catch(() {this.$message({type: info,message: 取消输入});});}}
};
/scriptNotification 通知
this.$notify() 悬浮出现在页面角落显示全局的通知提醒消息。接收一个 options 对象参数可以设置 title 字段和 message 字段用于设置通知的标题和正文。
默认情况下经过一段时间后 Notification 组件会自动关闭但是通过设置 duration可以控制关闭的时间间隔特别的是如果设置为 0则不会自动关闭。
type指定样式success、info、warning、error默认为 info。showClose可以人工关闭position定义 Notification 的弹出位置top-right、top-left、bottom-right、bottom-left默认为top-rightdangerouslyUseHTMLString设置为 truemessage 就会被当作 HTML 片段处理。
templatedivel-button plain clickopen1 成功 /el-buttonel-button plain clickopen2 警告 /el-buttonel-button plain clickopen3 消息 /el-buttonel-button plain clickopen4 错误 /el-buttonel-button plain clickopen5 不会自动关闭 /el-buttonel-button plain clickopen6 左上角 /el-button/div/div
/templatescript
export default {name: HomeView,methods: {open1() {this.$notify({title: 成功,message: 这是一条成功的提示消息,type: success,});},open2() {this.$notify({title: 警告,message: 这是一条警告的提示消息,type: warning,});},open3() {this.$notify.info({title: 消息,message: 这是一条消息的提示消息,});},open4() {this.$notify.error({title: 错误,message: 这是一条错误的提示消息,});},open5() {this.$notify({title: 提示,message: 这是一条不会自动关闭的消息,duration: 0});},open6() {this.$notify({title: 自定义位置,message: 左上角弹出的消息,position: top-left});}},
};
/scriptDialog 对话框
el-dialog 在保留当前页面状态的情况下弹出用户交互页面。Dialog 分为两个部分body 和 footerfooter 需要具名为 footer 的 slot。
title定义标题visibleBoolean为 true 时显示 Dialogbefore-close仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。如果你在 footer 具名 slot 里添加了用于关闭 Dialog 的按钮那么可以在按钮的点击回调函数里加入 before-close 的相关逻辑。
templatedivel-button typetext clickdialogVisible true点击打开 Dialog/el-buttonel-dialogtitle提示:visible.syncdialogVisiblewidth30%:before-closehandleClose!-- body --span这是一段信息/span!-- footer --span slotfooter classdialog-footerel-button clickdialogVisible false取 消/el-buttonel-button typeprimary clickdialogVisible false确 定/el-button/span/el-dialog/div
/template
script
export default {data() {return {dialogVisible: false};},methods: {handleClose(done) {this.$confirm(确认关闭).then(() {done();}).catch(() {});}}
};
/script自定义内容
Dialog 组件的内容可以是任意的甚至可以是表格或表单。
templatediv!-- Table --el-button typetext clickdialogTableVisible true打开嵌套表格的 Dialog/el-buttonel-dialog title收货地址 :visible.syncdialogTableVisibleel-table :datagridDatael-table-column propertydate label日期 width150/el-table-columnel-table-column propertyname label姓名 width200/el-table-columnel-table-column propertyaddress label地址/el-table-column/el-table/el-dialog!-- Form --el-button typetext clickdialogFormVisible true stylemargin-left:50px;打开嵌套表单的 Dialog/el-buttonel-dialog title收货地址 :visible.syncdialogFormVisibleel-form :modelformel-form-item label活动名称 :label-widthformLabelWidthel-input v-modelform.name autocompleteoff/el-input/el-form-itemel-form-item label活动区域 :label-widthformLabelWidthel-select v-modelform.region placeholder请选择活动区域el-option label区域一 valueshanghai/el-optionel-option label区域二 valuebeijing/el-option/el-select/el-form-item/el-formdiv slotfooter classdialog-footerel-button clickdialogFormVisible false取 消/el-buttonel-button typeprimary clickdialogFormVisible false确 定/el-button/div/el-dialog/div
/template
script
export default {data() {return {dialogTableVisible: false,dialogFormVisible: false,gridData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,},{date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,},{date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,},{date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,}],form: {name: ,region: },formLabelWidth: 120px,};}
};
/script嵌套的 Dialog
如果需要在一个 Dialog 内部嵌套另一个 Dialog需要使用 append-to-body 属性。
正常情况下我们不建议使用嵌套的 Dialog如果需要在页面上同时显示多个 Dialog可以将它们平级放置。对于确实需要嵌套 Dialog 的场景我们提供了 append-to-body 属性。
templatedivel-button typetext clickouterVisible true点击打开外层 Dialog/el-buttonel-dialog title外层 Dialog :visible.syncouterVisibleel-dialogwidth30%title内层 Dialog:visible.syncinnerVisibleappend-to-bodyspan我是内层 Dialog内容/span/el-dialogspan我是外层 Dialog内容/spandiv slotfooter classdialog-footerel-button clickouterVisible false取 消/el-buttonel-button typeprimary clickinnerVisible true打开内层 Dialog/el-button/div/el-dialog/div
/templatescript
export default {name: HomeView,data() {return {outerVisible: false,innerVisible: false,};},
};
/script嵌套平级放置 Dialog
templatedivel-button typetext clickdialogTableVisible true打开嵌套表格的 Dialog/el-buttonel-dialog title收货地址 :visible.syncdialogTableVisibleel-table :datagridDatael-table-column propertydate label日期 width150/el-table-columnel-table-column propertyname label姓名 width200/el-table-columnel-table-column propertyaddress label地址/el-table-columnel-table-column label操作template slot-scopescopeel-button typetext clickinnerVisible true查看详情/el-button/template/el-table-column/el-table/el-dialogel-dialog title用户信息 :visible.syncinnerVisibleel-descriptions title用户信息el-descriptions-item label用户名王小虎/el-descriptions-itemel-descriptions-item label手机号18100000000/el-descriptions-itemel-descriptions-item label居住地上海市/el-descriptions-itemel-descriptions-item label备注el-tag sizesmall学校/el-tag/el-descriptions-itemel-descriptions-item label联系地址上海市普陀区金沙江路 1518 弄/el-descriptions-item/el-descriptions/el-dialog/div
/templatescript
export default {name: HomeView,data() {return {dialogTableVisible: false,innerVisible: false,gridData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,},{date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,},{date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,},{date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,}]};}
};
/scriptDrawer 抽屉
有些时候el-dialog 组件并不满足我们的需求比如你的表单很长亦或是你需要临时展示一些文档el-drawer 拥有和 el-dialog几乎相同的 API在 UI 上带来不一样的体验。
el-drawer 在保留当前页面状态的情况下弹出用户交互页面。Drawer 分为两个部分title 和 bodytitle 需要具名为 title 的 slot。需要注意的是, Drawer 默认是从右往左打开, 当然可以设置对应的 direction。
title定义标题withHeader控制是否显示 header 栏, 默认为 true当此项为 false 时title attribute 和 title slot 均不生效visibleBoolean为 true 时显示 DrawerdirectionDrawer 打开的方向rtl / ltr / ttb / btt默认 rtl从右往左打开before-close仅当用户通过点击关闭图标或遮罩关闭 Drawer 时起效。可以在按钮的点击回调函数里加入 before-close 的相关逻辑。closeDrawer用于关闭 Drawer, 该方法会调用传入的 before-close 方法
templatedivh3带标头Title/h3el-button clickdrawer true typeprimary stylemargin-left: 16px点我从右往左打开/el-buttonel-drawertitle我是标题:visible.syncdrawerdirectionrtl:before-closehandleClosespan我来啦!/span/el-drawerh3从左往右开/h3el-button clickdrawer2 true typeprimary stylemargin-left: 16px点我从上往下打开/el-buttonel-drawertitle我是标题:visible.syncdrawer2directionttb:before-closehandleClosespan我来啦!/span/el-drawerh3不带标头Title/h3el-button clickdrawer3 true typeprimary stylemargin-left: 16px点我打开/el-buttonel-drawer title我是标题 :visible.syncdrawer3 :with-headerfalsespan我来啦!/span/el-drawerh3自定义内容/h3el-button typetext clicktable true打开嵌套表格的 Drawer/el-buttonel-button typetext clickdialog true打开嵌套 Form 的 Drawer/el-buttonel-drawertitle我嵌套了表格!:visible.synctabledirectionrtlsize50%el-table :datagridDatael-table-column propertydate label日期 width150 /el-table-columnel-table-column propertyname label姓名 width200 /el-table-columnel-table-column propertyaddress label地址/el-table-column/el-table/el-drawerel-drawertitle我嵌套了 Form !:before-closehandleClose:visible.syncdialogdirectionltrcustom-classdemo-drawerrefdrawerdiv classdemo-drawer__contentel-form :modelformel-form-item label活动名称 :label-widthformLabelWidthel-input v-modelform.name autocompleteoff/el-input/el-form-itemel-form-item label活动区域 :label-widthformLabelWidthel-select v-modelform.region placeholder请选择活动区域el-option label区域一 valueshanghai/el-optionel-option label区域二 valuebeijing/el-option/el-select/el-form-item/el-formdiv classdemo-drawer__footerel-button clickcancelForm取 消/el-buttonel-button typeprimary click$refs.drawer.closeDrawer() :loadingloading {{ loading ? 提交中 ... : 确 定 }}/el-button/div/div/el-drawerh3多层嵌套/h3el-button clickdrawer4 true typeprimary stylemargin-left: 16px点我打开/el-buttonel-drawer title我是外面的 Drawer :visible.syncdrawer4 size50%divel-button clickinnerDrawer true打开里面的!/el-buttonel-drawertitle我是里面的:append-to-bodytrue:before-closehandleClose:visible.syncinnerDrawerp_(:зゝ∠)_/p/el-drawer/div/el-drawer/div
/templatescript
export default {name: HomeView,data() {return {drawer: false,drawer2: false,drawer3: false,drawer4: false,table: false,dialog: false,loading: false,innerDrawer: false,gridData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,},{date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,},{date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,},{date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,}],form: {name: ,region: ,},formLabelWidth: 80px,timer: null,};},methods: {handleClose(done) {this.$confirm(确认关闭).then((_) {done();}).catch((_) {});},cancelForm() {this.loading false;this.dialog false;clearTimeout(this.timer);}}
};
/script6. 其他组件
如加载Loading、文字提示Tooltip、弹出框Popover、确认框Popconfirm、卡片Card、折叠面板Collapse、时间线Timeline、分割线Divider、无限滚动InfiniteScroll等。
Loading 加载
组件通过自定义指令 v-loading 使用加载层绑定 Boolean 即可。默认状况下Loading 遮罩会插入到绑定元素的子节点通过添加 body 修饰符可以使遮罩插入至 DOM 中的 body 上。
templatedivel-table v-loadingloading :datatableData stylewidth: 100%el-table-column propdate label日期 width180 /el-table-columnel-table-column propname label姓名 width180 /el-table-columnel-table-column propaddress label地址 /el-table-column/el-table/div
/templatescript
export default {name: HomeView,data() {return {loading: true,tableData: [{date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,},{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,},{date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,},]};},
};
/scriptTooltip 文字提示
el-tooltip 常用于展示鼠标 hover 时的提示信息。
content决定 hover 时的提示信息。placementTooltip 的出现位置effect提供的主题dark/light默认为 dark。
templatedivh3不同主题/h3el-tooltip contentTop center placementtopel-buttonDark/el-button/el-tooltipel-tooltip contentBottom center placementbottom effectlightel-buttonLight/el-button/el-tooltiph3不同方向的展示方式/h3el-tooltip effectdark contentTop Left 提示文字 placementtop-startel-button上左/el-button/el-tooltipel-tooltip effectdark contentRight Bottom 提示文字 placementright-endel-button右下/el-button/el-tooltipel-tooltip effectdark contentLeft Center 提示文字 placementleftel-button左边/el-button/el-tooltipel-tooltip classitem effectdark contentRight Center 提示文字 placementrightel-button右边/el-button/el-tooltiph3自定义Content/h3el-tooltip placementtopdiv slotcontent多行信息br /第二行信息/divel-buttonTop center/el-button/el-tooltip/div
/templatescript
export default {name: HomeView
};
/scriptPopover 弹出框
el-popover 与 el-tooltip很类似它们都是基于 Vue-popper 开发的很多属性类似。以下列出 el-popover 常用属性
trigger用于设置何时触发 Popoverhover、click、focus、manual。默认 click。对于触发 Popover 的元素有两种写法使用 slotreference 的具名插槽或使用自定义指令 v-popover 指向 Popover 的索引 ref。content嵌套多种类型信息value / v-model状态是否可见Boolean默认 false。
templatedivel-popoverplacementtop-starttitle标题width200triggerhovercontent这是一段内容,这是一段内容,这是一段内容,这是一段内容。el-button slotreferencehover 激活/el-button/el-popoverel-popoverplacementbottomtitle标题width200triggerclickcontent这是一段内容,这是一段内容,这是一段内容,这是一段内容。el-button v-popover:popoverclick 激活/el-button/el-popoverh3嵌套信息/h3el-popover placementright width400 triggerclickel-table :datagridDatael-table-column width150 propertydate label日期/el-table-columnel-table-column width100 propertyname label姓名/el-table-columnel-table-column width300 propertyaddress label地址/el-table-column/el-tableel-button slotreferenceclick 激活/el-button/el-popoverh3嵌套操作/h3el-popover placementtop width160 v-modelvisiblep这是一段内容这是一段内容确定删除吗/pdiv styletext-align: right; margin: 0el-button sizemini typetext clickvisible false取消/el-buttonel-button typeprimary sizemini clickvisible false确定/el-button/divel-button slotreference删除/el-button/el-popover/div
/templatescript
export default {name: HomeView,data() {return {visible: false,gridData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,},{date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,},{date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,},{date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,}],};}
};
/scriptPopconfirm 气泡确认框
el-popconfirm 的属性与 el-popover 很类似本身自带“取消”、“确认”按钮。需要注意的是el-popconfirm 只有 title 属性可用content 属性不会被展示。以下列出 el-popconfirm 常用属性
title标题confirm-button-text确认按钮文字cancel-button-text取消按钮文字iconIconconfirm点击确认按钮时触发cancel点击取消按钮时触发
templatedivh3基本用法/h3el-popconfirm title这是一段内容确定删除吗el-button slotreference删除/el-button/el-popconfirmh3自定义/h3el-popconfirmconfirm-button-text好的cancel-button-text不用了iconel-icon-infoicon-colorredconfirmconfirmHandlecancelcancelHandletitle这是一段内容确定删除吗el-button slotreference删除/el-button/el-popconfirm/div
/templatescript
export default {name: HomeView,methods: {confirmHandle() {console.log(confirmHandle);},cancelHandle() {console.log(cancelHandle);}}
};
/scriptCard 卡片
el-card 组件包括 header 和 body 部分header 部分需要有显式具名 slot 分发同时也是可选的。
header设置卡片标题shadow设置阴影显示always / hover / never默认 alwaysbody-style设置 body 的样式object
templatedivel-card classbox-card shadowalwaysdiv v-foro in 4 :keyo classtext item{{ 列表内容 o }}/div/el-cardh3带表头card/h3el-card classbox-card shadowhoverdiv slotheader classclearfixspan卡片名称/spanel-button stylefloat: right; padding: 3px 0 typetext操作按钮/el-button/divdiv v-foro in 4 :keyo classtext item{{ 列表内容 o }}/div/el-cardh3带图片/h3el-card :body-style{ padding: 0px } classbox-cardimg srchttps://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png classimage/div stylepadding: 14pxspan好吃的汉堡/spandiv classbottom clearfixtime classtime{{ currentDate }}/timeel-button typetext classbutton操作按钮/el-button/div/div/el-card/div
/templatescript
export default {name: HomeView,data() {return {currentDate: new Date()};}
};
/scriptstyle
.text {font-size: 14px;
}
.item {margin-bottom: 18px;
}
.box-card {width: 300px;
}
.image {width: 100%;display: block;
}
/styleCollapse 折叠面板
el-collapse 通过折叠面板收纳内容区域
value / v-model当前激活的面板accordion是否手风琴模式每次只能展开一个面板change当前激活面板改变时触发事件
el-collapse-item 设置折叠面板项
name唯一标志符title面板标题可以通过具名 slot 来实现自定义面板的标题内容以实现增加图标等效果。
templatedivel-collapse v-modelactiveNames changehandleChangeel-collapse-item name1span slottitle 一致性 Consistency i classel-icon-info/i /spandiv与现实生活一致与现实生活的流程、逻辑保持一致遵循用户习惯的语言和概念/divdiv在界面中一致所有的元素和结构需保持一致比如设计样式、图标和文本、元素的位置等。/div/el-collapse-itemel-collapse-item title反馈 Feedback name2div控制反馈通过界面样式和交互动效让用户可以清晰的感知自己的操作/divdiv页面反馈操作后通过页面元素的变化清晰地展现当前状态。/div/el-collapse-itemel-collapse-item title效率 Efficiency name3div简化流程设计简洁直观的操作流程/divdiv清晰明确语言表达清晰且表意明确让用户快速理解进而作出决策/divdiv帮助用户识别界面简单直白让用户快速识别而非回忆减少用户记忆负担。/div/el-collapse-itemel-collapse-item name4template slottitle可控 Controllability i classel-icon-question/i/templatediv用户决策根据场景可给予用户操作建议或安全提示但不能代替用户进行决策/divdiv结果可控用户可以自由的进行操作包括撤销、回退和终止当前操作等。/div/el-collapse-item/el-collapse/div
/templatescript
export default {name: HomeView,data() {return {activeNames: [1]};},methods: {handleChange(val) {console.log(val);}}
};
/scriptTimeline 时间线
el-timeline 通常用于展示一系列事件的发生顺序时间戳是其区分于其他控件的重要特征每个事件可以有标题和详细描述。 步骤条 el-steps 用于引导用户按照特定的步骤完成一个任务。每个步骤通常有标题和描述可以通过指定当前步骤来显示进度。
timestamp时间戳placement时间戳位置top / bottom默认bottomtype节点类型primary / success / warning / danger / infocolor节点颜色size节点尺寸normal / largeicon节点图标
templatedivh3⾃定义节点样式/h3el-timelineel-timeline-itemv-for(activity, index) in activities:keyindex:iconactivity.icon:typeactivity.type:coloractivity.color:sizeactivity.size:timestampactivity.timestamp{{ activity.content }}/el-timeline-item/el-timelineh3⾃定义时间戳/h3el-timelineel-timeline-item timestamp2018/4/12 placementtopel-cardh4更新 Github 模板/h4p王小虎 提交于 2018/4/12 20:46/p/el-card/el-timeline-itemel-timeline-item timestamp2018/4/3 placementtopel-cardh4更新 Github 模板/h4p王小虎 提交于 2018/4/3 20:46/p/el-card/el-timeline-itemel-timeline-item timestamp2018/4/2 placementtopel-cardh4更新 Github 模板/h4p王小虎 提交于 2018/4/2 20:46/p/el-card/el-timeline-item/el-timeline/div
/templatescript
export default {name: HomeView,data() {return {activities: [{content: 支持使用图标,timestamp: 2018-04-12 20:46,size: large,type: primary,icon: el-icon-more,},{content: 支持自定义颜色,timestamp: 2018-04-03 20:46,color: #0bbd87,},{content: 支持自定义尺寸,timestamp: 2018-04-03 20:46,size: large,},{content: 默认样式的节点,timestamp: 2018-04-03 20:46,}]};}
};
/scriptDivider 分割线
el-divider 区隔内容的分割线。
direction设置分割线方向horizontal / vertical默认 horizontalcontent-position设置分割线文案的位置left / right / center默认 center
templatedivspan青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪/spanel-divider/el-dividerspan少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉/spanel-divider content-positionleft少年包青天/el-dividerspan饿了别叫妈, 叫饿了么/spanel-divideri classel-icon-mobile-phone/i/el-dividerspan为了无法计算的价值/spanel-divider content-positionright阿里云/el-dividerspan雨纷纷/spanel-divider directionvertical/el-dividerspan旧故里/spanel-divider directionvertical/el-dividerspan草木深/span/div
/templatescript
export default {name: HomeView
};
/scriptInfiniteScroll 无限滚动
滚动至底部时加载更多数据。要实现滚动加载的列表上上添加 v-infinite-scroll 并赋值相应的加载方法可实现滚动到底部时自动执行加载方法。
infinite-scroll-disabled是否禁用booleaninfinite-scroll-immediate是否立即执行加载方法以防初始状态下内容无法撑满容器。boolean
templatedivdiv classinfinite-list-wrapper styleoverflow: autoulclasslistv-infinite-scrollloadinfinite-scroll-disableddisabledli v-for(i, index) in list classlist-item :keyindex{{ index }} {{ i.title }}/li/ulp v-ifloading stylecolor: red;加载中.../pp v-ifnoMore stylecolor: green;没有更多了/p/div/div
/templatescript
export default {data() {return {count: 1, //起始页数值为0loading: false,totalPages: 10, //取后端返回内容的总页数list: [], //后端返回的数组};},computed: {noMore() {return this.count this.totalPages - 1;},disabled() {return this.loading || this.noMore;},},created() {this.getMessage();},methods: {load() {//滑到底部时进行加载this.loading true;setTimeout(() {this.count 1; //页数1this.getMessage(); //调用接口此时页数1查询下一页数据this.loading false;}, 2000);},//没有后端的情况getMessage() {let templist [{title: 我爱您 你却爱着她,},{title: 我爱您 你却爱着她,},{title: 我爱您 你却爱着她,},{title: 我爱您 你却爱着她,}];this.list this.list.concat(templist);this.loading false;},//有后端的情况// getMessage() {// let params {// pageNumber: this.count,// pageSize: 10 //每页查询条数// };// console.log(params);// request({// url:/getfollowlist,// method:post,// data:{// params// }// }).then(res {// console.log(res);// this.list this.list.concat(res.data.list);// //因为每次后端返回的都是数组所以这边把数组拼接到一起 concat() 方法用于连接两个或多个数组。 该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本// this.loading false;// }).catch(err { console.log(err);});// }},
};
/script
style scoped
/* 解决进去后一直自己加载的问题加 height: 100vh;意思为 height: 100%; */
.infinite-list-wrapper {height: 100vh;.list-item {height: 110px;}
}
/style无限加载 ⚠️注意复制官方代码发现我还没滚动他就无限加载查阅资料发现infinite-list-wrapper 需要加上 height: 100vh;意思为 height: 100%;。 文章转载自： http://www.morning.mpnff.cn.gov.cn.mpnff.cn http://www.morning.sglcg.cn.gov.cn.sglcg.cn http://www.morning.rdmz.cn.gov.cn.rdmz.cn http://www.morning.ytfr.cn.gov.cn.ytfr.cn http://www.morning.rrxgx.cn.gov.cn.rrxgx.cn http://www.morning.kdrly.cn.gov.cn.kdrly.cn http://www.morning.tfwsk.cn.gov.cn.tfwsk.cn http://www.morning.nfyc.cn.gov.cn.nfyc.cn http://www.morning.rdlxh.cn.gov.cn.rdlxh.cn http://www.morning.czxrg.cn.gov.cn.czxrg.cn http://www.morning.nmkfy.cn.gov.cn.nmkfy.cn http://www.morning.kwksj.cn.gov.cn.kwksj.cn http://www.morning.rqjfm.cn.gov.cn.rqjfm.cn http://www.morning.dfojgo.cn.gov.cn.dfojgo.cn http://www.morning.tdscl.cn.gov.cn.tdscl.cn http://www.morning.rxwnc.cn.gov.cn.rxwnc.cn http://www.morning.3dcb8231.cn.gov.cn.3dcb8231.cn http://www.morning.kxqfz.cn.gov.cn.kxqfz.cn http://www.morning.xpzrx.cn.gov.cn.xpzrx.cn http://www.morning.yrngx.cn.gov.cn.yrngx.cn http://www.morning.jhxtm.cn.gov.cn.jhxtm.cn http://www.morning.madamli.com.gov.cn.madamli.com http://www.morning.rfyff.cn.gov.cn.rfyff.cn http://www.morning.pzrnf.cn.gov.cn.pzrnf.cn http://www.morning.ntzfj.cn.gov.cn.ntzfj.cn http://www.morning.rdlrm.cn.gov.cn.rdlrm.cn http://www.morning.qygfb.cn.gov.cn.qygfb.cn http://www.morning.kpgft.cn.gov.cn.kpgft.cn http://www.morning.lwmzp.cn.gov.cn.lwmzp.cn http://www.morning.fqqlq.cn.gov.cn.fqqlq.cn http://www.morning.bswnf.cn.gov.cn.bswnf.cn http://www.morning.tztgq.cn.gov.cn.tztgq.cn http://www.morning.ydflc.cn.gov.cn.ydflc.cn http://www.morning.shxrn.cn.gov.cn.shxrn.cn http://www.morning.5-73.com.gov.cn.5-73.com http://www.morning.rknjx.cn.gov.cn.rknjx.cn http://www.morning.mkfr.cn.gov.cn.mkfr.cn http://www.morning.gyjld.cn.gov.cn.gyjld.cn http://www.morning.ljdjn.cn.gov.cn.ljdjn.cn http://www.morning.kfysh.com.gov.cn.kfysh.com http://www.morning.lkmks.cn.gov.cn.lkmks.cn http://www.morning.tmfm.cn.gov.cn.tmfm.cn http://www.morning.zyffq.cn.gov.cn.zyffq.cn http://www.morning.sthp.cn.gov.cn.sthp.cn http://www.morning.hbywj.cn.gov.cn.hbywj.cn http://www.morning.kscwt.cn.gov.cn.kscwt.cn http://www.morning.cptzd.cn.gov.cn.cptzd.cn http://www.morning.nj-ruike.cn.gov.cn.nj-ruike.cn http://www.morning.lgsfb.cn.gov.cn.lgsfb.cn http://www.morning.mhlkc.cn.gov.cn.mhlkc.cn http://www.morning.trrpb.cn.gov.cn.trrpb.cn http://www.morning.nktxr.cn.gov.cn.nktxr.cn http://www.morning.qkrqt.cn.gov.cn.qkrqt.cn http://www.morning.fgwzl.cn.gov.cn.fgwzl.cn http://www.morning.qcslh.cn.gov.cn.qcslh.cn http://www.morning.nfgbf.cn.gov.cn.nfgbf.cn http://www.morning.xscpq.cn.gov.cn.xscpq.cn http://www.morning.rgpsq.cn.gov.cn.rgpsq.cn http://www.morning.wmmtl.cn.gov.cn.wmmtl.cn http://www.morning.gcfg.cn.gov.cn.gcfg.cn http://www.morning.ltzkk.cn.gov.cn.ltzkk.cn http://www.morning.zqzhd.cn.gov.cn.zqzhd.cn http://www.morning.fqssx.cn.gov.cn.fqssx.cn http://www.morning.zmlnp.cn.gov.cn.zmlnp.cn http://www.morning.stxg.cn.gov.cn.stxg.cn http://www.morning.jqjnx.cn.gov.cn.jqjnx.cn http://www.morning.zqcdl.cn.gov.cn.zqcdl.cn http://www.morning.pswzc.cn.gov.cn.pswzc.cn http://www.morning.ddtdy.cn.gov.cn.ddtdy.cn http://www.morning.bmgdl.cn.gov.cn.bmgdl.cn http://www.morning.rgyts.cn.gov.cn.rgyts.cn http://www.morning.kpbq.cn.gov.cn.kpbq.cn http://www.morning.yesidu.com.gov.cn.yesidu.com http://www.morning.dmwbs.cn.gov.cn.dmwbs.cn http://www.morning.nfcxq.cn.gov.cn.nfcxq.cn http://www.morning.nfbkp.cn.gov.cn.nfbkp.cn http://www.morning.gmysq.cn.gov.cn.gmysq.cn http://www.morning.mdjtk.cn.gov.cn.mdjtk.cn http://www.morning.xrpwk.cn.gov.cn.xrpwk.cn http://www.morning.ngkgy.cn.gov.cn.ngkgy.cn
