1 |
- (window.webpackJsonp=window.webpackJsonp||[]).push([[2],{410:function(s,t,a){var l={"./changelog.vue":765,"./component.vue":771,"./design.vue":879,"./guide.vue":772,"./index.vue":773,"./nav.vue":774,"./resource.vue":880};function n(s){s=e(s);return a(s)}function e(s){if(a.o(l,s))return l[s];throw(s=new Error("Cannot find module '"+s+"'")).code="MODULE_NOT_FOUND",s}n.keys=function(){return Object.keys(l)},n.resolve=e,(s.exports=n).id=410},412:function(s,t,a){var l={"./en-US/alert.md":845,"./en-US/badge.md":894,"./en-US/breadcrumb.md":895,"./en-US/button.md":846,"./en-US/card.md":847,"./en-US/carousel.md":848,"./en-US/cascader.md":849,"./en-US/checkbox.md":728,"./en-US/collapse.md":850,"./en-US/color-picker.md":851,"./en-US/color.md":896,"./en-US/custom-theme.md":897,"./en-US/date-picker.md":732,"./en-US/datetime-picker.md":734,"./en-US/dialog.md":736,"./en-US/dropdown.md":852,"./en-US/form.md":853,"./en-US/home.md":854,"./en-US/i18n.md":898,"./en-US/icon.md":855,"./en-US/input-number.md":856,"./en-US/input.md":857,"./en-US/installation.md":899,"./en-US/layout.md":900,"./en-US/loading.md":858,"./en-US/menu.md":859,"./en-US/message-box.md":860,"./en-US/message.md":746,"./en-US/notification.md":747,"./en-US/pagination.md":861,"./en-US/popover.md":862,"./en-US/progress.md":901,"./en-US/quickstart.md":902,"./en-US/radio.md":750,"./en-US/rate.md":863,"./en-US/select.md":864,"./en-US/slider.md":865,"./en-US/steps.md":866,"./en-US/switch.md":867,"./en-US/table.md":868,"./en-US/tabs.md":869,"./en-US/tag.md":870,"./en-US/time-picker.md":871,"./en-US/timeline.md":872,"./en-US/tooltip.md":873,"./en-US/transfer.md":874,"./en-US/transition.md":759,"./en-US/tree.md":875,"./en-US/typography.md":903,"./en-US/upload.md":876};function n(s){s=e(s);return a(s)}function e(s){if(a.o(l,s))return l[s];throw(s=new Error("Cannot find module '"+s+"'")).code="MODULE_NOT_FOUND",s}n.keys=function(){return Object.keys(l)},n.resolve=e,(s.exports=n).id=412},446:function(s,t,a){"use strict";a.r(t);var l,n=a(447),e=a.n(n);for(l in n)["default"].indexOf(l)<0&&!function(s){a.d(t,s,function(){return n[s]})}(l);t.default=e.a},447:function(s,t){var a=["Shanghai","Beijing","Guangzhou","Shenzhen"];s.exports={data:function(){return{checkList:["selected and disabled","Option A"],checked:!0,checked1:!1,checked2:!0,isValid:"valid",checkAll:!1,cities:a,checkedCities:["Shanghai","Beijing"],checkedCities1:["Shanghai","Beijing"],isIndeterminate:!0,checkboxGroup1:["Shanghai"],checkboxGroup2:["Beijing"],checkboxGroup3:["Guangzhou"]}},methods:{handleChange:function(s){console.log(s)},handleCheckAllChange:function(s){this.checkedCities=s.target.checked?a:[],this.isIndeterminate=!1},handleCheckedCitiesChange:function(s){s=s.length;this.checkAll=s===this.cities.length,this.isIndeterminate=0<s&&s<this.cities.length}}}},448:function(s,t,a){"use strict";a.r(t);var l,n=a(449),e=a.n(n);for(l in n)["default"].indexOf(l)<0&&!function(s){a.d(t,s,function(){return n[s]})}(l);t.default=e.a},449:function(s,t){s.exports={data:function(){return{pickerOptions1:{shortcuts:[{text:"Today",onClick:function(s){s.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(s){var t=new Date;t.setTime(t.getTime()-864e5),s.$emit("pick",t)}},{text:"A week ago",onClick:function(s){var t=new Date;t.setTime(t.getTime()-6048e5),s.$emit("pick",t)}}]},pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-6048e5),s.$emit("pick",[a,t])}},{text:"Last month",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-2592e6),s.$emit("pick",[a,t])}},{text:"Last 3 months",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-7776e6),s.$emit("pick",[a,t])}}]},value1:"",value2:"",value3:"",value4:"",value5:"",value6:"",value7:""}}}},450:function(s,t,a){"use strict";a.r(t);var l,n=a(451),e=a.n(n);for(l in n)["default"].indexOf(l)<0&&!function(s){a.d(t,s,function(){return n[s]})}(l);t.default=e.a},451:function(s,t){s.exports={data:function(){return{pickerOptions1:{shortcuts:[{text:"Today",onClick:function(s){s.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(s){var t=new Date;t.setTime(t.getTime()-864e5),s.$emit("pick",t)}},{text:"A week ago",onClick:function(s){var t=new Date;t.setTime(t.getTime()-6048e5),s.$emit("pick",t)}}]},pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-6048e5),s.$emit("pick",[a,t])}},{text:"Last month",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-2592e6),s.$emit("pick",[a,t])}},{text:"Last 3 months",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-7776e6),s.$emit("pick",[a,t])}}]},value1:"",value2:"",value3:new Date,value4:"",value5:"",value6:"",value7:"",value8:"",value9:"",value10:"",value11:"",value12:"",value13:"",value14:"",value15:"",value16:""}}}},452:function(s,t,a){"use strict";a.r(t);var l,n=a(453),e=a.n(n);for(l in n)["default"].indexOf(l)<0&&!function(s){a.d(t,s,function(){return n[s]})}(l);t.default=e.a},453:function(s,t){s.exports={data:function(){return{gridData:[{date:"2016-05-02",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-03",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"}],dialogVisible:!1,dialogTableVisible:!1,dialogFormVisible:!1,form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formLabelWidth:"120px"}},methods:{handleClose:function(t){this.$confirm("Are you sure to close this dialog?",{callback:function(s){"confirm"===s&&t()}})}}}},454:function(s,t,a){"use strict";a.r(t);var l,n=a(455),e=a.n(n);for(l in n)["default"].indexOf(l)<0&&!function(s){a.d(t,s,function(){return n[s]})}(l);t.default=e.a},455:function(s,t){s.exports={methods:{open:function(){this.$message("This is a message.")},openVn:function(){var s=this.$createElement;this.$message({message:s("p",null,[s("span",null,"Message can be "),s("i",{style:"color: teal"},"VNode")])})},open2:function(){this.$message({message:"Congrats, this is a success message.",type:"success"})},open3:function(){this.$message({message:"Warning, this is a warning message.",type:"warning"})},open4:function(){this.$message.error("Oops, this is a error message.")},open5:function(){this.$message({showClose:!0,message:"This is a message."})},open6:function(){this.$message({showClose:!0,message:"Congrats, this is a success message.",type:"success"})},open7:function(){this.$message({showClose:!0,message:"Warning, this is a warning message.",type:"warning"})},open8:function(){this.$message({showClose:!0,message:"Oops, this is a error message.",type:"error"})}}}},456:function(s,t,a){"use strict";a.r(t);var l,n=a(457),e=a.n(n);for(l in n)["default"].indexOf(l)<0&&!function(s){a.d(t,s,function(){return n[s]})}(l);t.default=e.a},457:function(s,t){s.exports={methods:{open:function(){var s=this.$createElement;this.$notify({title:"Title",message:s("i",{style:"color: teal"},"This is a reminder")})},open2:function(){this.$notify({title:"Prompt",message:"This is a message that does not automatically close",duration:0})},open3:function(){this.$notify({title:"Success",message:"This is a success message",type:"success"})},open4:function(){this.$notify({title:"Warning",message:"This is a warning message",type:"warning"})},open5:function(){this.$notify.info({title:"Info",message:"This is an info message"})},open6:function(){this.$notify.error({title:"Error",message:"This is an error message"})},open7:function(){this.$notify.success({title:"Success",message:"This is a success message",offset:100})},onClose:function(){console.log("Notification is closed")}}}},458:function(s,t,a){"use strict";a.r(t);var l,n=a(459),e=a.n(n);for(l in n)["default"].indexOf(l)<0&&!function(s){a.d(t,s,function(){return n[s]})}(l);t.default=e.a},459:function(s,t){s.exports={data:function(){return{radio:"1",radio1:"selected and disabled",radio2:3,radio3:"New York",radio4:"New York",radio5:"New York"}}}},460:function(s,t,a){"use strict";a.r(t);var l,n=a(461),e=a.n(n);for(l in n)["default"].indexOf(l)<0&&!function(s){a.d(t,s,function(){return n[s]})}(l);t.default=e.a},461:function(s,t){s.exports={data:function(){return{show:!0,show2:!0,show3:!0}}}},485:function(s,t,a){},486:function(s,t,a){},487:function(s,t,a){},488:function(s,t,a){},489:function(s,t,a){},490:function(s,t,a){},491:function(s,t,a){},576:function(s,t,a){},577:function(s,t,a){},578:function(s,t,a){},579:function(s,t,a){},580:function(s,t,a){},581:function(s,t,a){},582:function(s,t,a){},583:function(s,t,a){},584:function(s,t,a){},585:function(s,t,a){},586:function(s,t,a){},587:function(s,t,a){},588:function(s,t,a){},589:function(s,t,a){},590:function(s,t,a){},591:function(s,t,a){},592:function(s,t,a){},593:function(s,t,a){},594:function(s,t,a){},595:function(s,t,a){},596:function(s,t,a){},597:function(s,t,a){},598:function(s,t,a){},599:function(s,t,a){},600:function(s,t,a){},601:function(s,t,a){},602:function(s,t,a){},603:function(s,t,a){},604:function(s,t,a){},605:function(s,t,a){},606:function(s,t,a){},607:function(s,t,a){},608:function(s,t,a){},609:function(s,t,a){},618:function(s,t,a){"use strict";a(485)},619:function(s,t,a){"use strict";a(486)},620:function(s,t,a){"use strict";a(487)},621:function(s,t,a){"use strict";a(488)},622:function(s,t,a){"use strict";a(489)},623:function(s,t,a){"use strict";a(490)},624:function(s,t,a){"use strict";a(491)},722:function(s,t,a){"use strict";a(576)},723:function(s,t,a){"use strict";a(577)},724:function(s,t,a){"use strict";a(578)},725:function(s,t,a){"use strict";a(579)},726:function(s,t,a){"use strict";a(580)},727:function(s,t,a){"use strict";a(581)},728:function(s,t,a){"use strict";a.r(t);var l,n=a(920),e=a(446);for(l in e)["default"].indexOf(l)<0&&!function(s){a.d(t,s,function(){return e[s]})}(l);var r=a(0),r=Object(r.a)(e.default,n.a,n.b,!1,null,null,null);t.default=r.exports},729:function(s,t,a){"use strict";a(582)},730:function(s,t,a){"use strict";a(583)},731:function(s,t,a){"use strict";a(584)},732:function(s,t,a){"use strict";a.r(t);var l,n=a(921),e=a(448);for(l in e)["default"].indexOf(l)<0&&!function(s){a.d(t,s,function(){return e[s]})}(l);a(733);var r=a(0),r=Object(r.a)(e.default,n.a,n.b,!1,null,null,null);t.default=r.exports},733:function(s,t,a){"use strict";a(585)},734:function(s,t,a){"use strict";a.r(t);var l,n=a(922),e=a(450);for(l in e)["default"].indexOf(l)<0&&!function(s){a.d(t,s,function(){return e[s]})}(l);a(735);var r=a(0),r=Object(r.a)(e.default,n.a,n.b,!1,null,null,null);t.default=r.exports},735:function(s,t,a){"use strict";a(586)},736:function(s,t,a){"use strict";a.r(t);var l,n=a(923),e=a(452);for(l in e)["default"].indexOf(l)<0&&!function(s){a.d(t,s,function(){return e[s]})}(l);a(737);var r=a(0),r=Object(r.a)(e.default,n.a,n.b,!1,null,null,null);t.default=r.exports},737:function(s,t,a){"use strict";a(587)},738:function(s,t,a){"use strict";a(588)},739:function(s,t,a){"use strict";a(589)},740:function(s,t,a){"use strict";a(590)},741:function(s,t,a){"use strict";a(591)},742:function(s,t,a){"use strict";a(592)},743:function(s,t,a){"use strict";a(593)},744:function(s,t,a){"use strict";a(594)},745:function(s,t,a){"use strict";a(595)},746:function(s,t,a){"use strict";a.r(t);var l,n=a(924),e=a(454);for(l in e)["default"].indexOf(l)<0&&!function(s){a.d(t,s,function(){return e[s]})}(l);var r=a(0),r=Object(r.a)(e.default,n.a,n.b,!1,null,null,null);t.default=r.exports},747:function(s,t,a){"use strict";a.r(t);var l,n=a(925),e=a(456);for(l in e)["default"].indexOf(l)<0&&!function(s){a.d(t,s,function(){return e[s]})}(l);var r=a(0),r=Object(r.a)(e.default,n.a,n.b,!1,null,null,null);t.default=r.exports},748:function(s,t,a){"use strict";a(596)},749:function(s,t,a){"use strict";a(597)},750:function(s,t,a){"use strict";a.r(t);var l,n=a(926),e=a(458);for(l in e)["default"].indexOf(l)<0&&!function(s){a.d(t,s,function(){return e[s]})}(l);var r=a(0),r=Object(r.a)(e.default,n.a,n.b,!1,null,null,null);t.default=r.exports},751:function(s,t,a){"use strict";a(598)},752:function(s,t,a){"use strict";a(599)},753:function(s,t,a){"use strict";a(600)},754:function(s,t,a){"use strict";a(601)},755:function(s,t,a){"use strict";a(602)},756:function(s,t,a){"use strict";a(603)},757:function(s,t,a){"use strict";a(604)},758:function(s,t,a){"use strict";a(605)},759:function(s,t,a){"use strict";a.r(t);var l,n=a(927),e=a(460);for(l in e)["default"].indexOf(l)<0&&!function(s){a.d(t,s,function(){return e[s]})}(l);a(760);var r=a(0),r=Object(r.a)(e.default,n.a,n.b,!1,null,null,null);t.default=r.exports},760:function(s,t,a){"use strict";a(606)},761:function(s,t,a){"use strict";a(607)},762:function(s,t,a){"use strict";a(608)},763:function(s,t,a){"use strict";a(609)},765:function(s,t,a){"use strict";a.r(t);var l=a(0),n={components:{ChangeLog:Object(l.a)({},function(){var s=this.$createElement;this._self._c;return this._m(0)},[function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("section",[t("h2",{attrs:{id:"changelog"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#changelog","aria-hidden":"true"}},[s._v("¶")]),s._v(" Changelog")]),t("h3",{attrs:{id:"1.2.0"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1.2.0","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.0")]),t("p",[t("em",[s._v("2019-03-08")])]),t("ul",[t("li",[s._v("组件工程编译模块升级,去掉过时的cooking,换成全新的webpack4.x\n"),t("ul",[t("li",[s._v("组件import别名调整为@。")])])]),t("li",[s._v("单元测试增强")])]),t("h3",{attrs:{id:"1.1.2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1.1.2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.2")]),t("p",[t("em",[s._v("2019-03-07")])]),t("ul",[t("li",[s._v("新增"),t("code",{pre:!0},[s._v("TimeLine")]),s._v("组件")]),t("li",[s._v("修复"),t("code",{pre:!0},[s._v("Xtable")]),s._v("组件\n"),t("ul",[t("li",[s._v("增加tableColumn属性,用于导出")]),t("li",[s._v("增加可编辑表格校验功能")]),t("li",[s._v("增加表格合并行列")]),t("li",[s._v("增加监听dataUrl,baseParams,增加defaultLoad是否默认加载属性")]),t("li",[s._v("修复分页问题")]),t("li",[s._v("修复可编辑表格多表头问题解决")]),t("li",[s._v("修复动态更改data数据无效问题")]),t("li",[s._v("修复校验导致点击无法选中问题")])])]),t("li",[s._v("修复"),t("code",{pre:!0},[s._v("XForm")]),s._v("组件\n"),t("ul",[t("li",[s._v("增加支持自定义内容")]),t("li",[s._v("增加组件必输校验时显示星号")]),t("li",[s._v("增加force-column属性,控制查询按钮是否紧跟查询条件或独占一行")]),t("li",[s._v("增加xform表单属性hiddenRule,输入项隐藏时,不执行该输入项规则验证")]),t("li",[s._v("修复查询表单间距调整")]),t("li",[s._v("修复初始值校验问题")]),t("li",[s._v("修复输入框增加金额格式化示例")]),t("li",[s._v("修复数值类型输入框初始值为0时无法显示")]),t("li",[s._v("修复下拉多选框,复选框提交的数据中数组第一个元素是empty")]),t("li",[s._v("修复多选框,单选框,日期框,值改变时不触发校验问题")]),t("li",[s._v("修复自定义组件中查询表单查询失效问题")]),t("li",[s._v("修复数值检验提示信息优化")]),t("li",[s._v("修复校验某个字段不生效问题")])])]),t("li",[s._v("修复"),t("code",{pre:!0},[s._v("XDynamicForm")]),s._v("组件\n"),t("ul",[t("li",[s._v("增加获取数据方法,required校验问题修复")]),t("li",[s._v("增加联动功能,数值类型输入框格式化问题修复")]),t("li",[s._v("增加可配置是否有折叠")]),t("li",[s._v("增加静态模版数据支持linkage为字符串形式")]),t("li",[s._v("修复动态数据校验问题解决")]),t("li",[s._v("修复赋初值动态表单联动功能完善")]),t("li",[s._v("修复数值类型输入框输入字母显示NAN问题解决")]),t("li",[s._v("修复赋初始值触发联动,默认值无法更改值问题,隐藏的字段无法触发联动问题")]),t("li",[s._v("修复dataUrl,初始值不显示问题")])])]),t("li",[s._v("修复"),t("code",{pre:!0},[s._v("XSelect")]),s._v("组件,\n"),t("ul",[t("li",[s._v("增加下拉框支持禁用某个选项")]),t("li",[s._v("修复chang事件触发两次问题")])])]),t("li",[s._v("修复"),t("code",{pre:!0},[s._v("Tree")]),s._v("组件\n"),t("ul",[t("li",[s._v("调整tree css样式(解决文字过多问题,没有滚动条问题)")])])]),t("li",[s._v("修复"),t("code",{pre:!0},[s._v("XDialog")]),s._v("、"),t("code",{pre:!0},[s._v("Dialog")]),s._v("组件\n"),t("ul",[t("li",[s._v("全屏时不居中显示问题")])])])]),t("h3",{attrs:{id:"1.1.1"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1.1.1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.1")]),t("p",[t("em",[s._v("2018-10-10")])]),t("ul",[t("li",[s._v("组件工程规范化调整\n"),t("ul",[t("li",[s._v("组件import别名调整为yufp-wp。")]),t("li",[s._v("全局变量别名由"),t("code",{pre:!0},[s._v("ELEMENT")]),s._v("调整为"),t("code",{pre:!0},[s._v("YUFPWP")]),s._v(",避免和其它版本冲突。")])])]),t("li",[s._v("组件文档版本切换修复")])]),t("h3",{attrs:{id:"1.1.0"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1.1.0","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.0")]),t("p",[t("em",[s._v("2018-09-29")])]),t("ul",[t("li",[s._v("业务组件统一命名为x系列,如:xtable、xform、xselect等等。\n"),t("ul",[t("li",[s._v("XDialog <- DialogX 对话框")]),t("li",[s._v("Xtree <- TreeX 封装树")]),t("li",[s._v("Xselect <- SelectX 封装下拉框")]),t("li",[s._v("Xradio <- RadioX 封装单选框")]),t("li",[s._v("Xcheckbox <- CheckboxX 封装复选框")]),t("li",[s._v("Xcascader <- CascaderX 封装级联选择器")]),t("li",[s._v("XtableX <- TableX 封装表格,不推荐使用,推荐使用Xtable")]),t("li",[s._v("XformQ <- FormQ 表单查询,不推荐使用,推荐使用Xform")]),t("li",[s._v("XformX <- FormX 封装表单,不推荐使用,推荐使用Xform")])])]),t("li",[s._v("组件更改统一命名为"),t("code",{pre:!0},[s._v("yu-")]),s._v("前缀,同时兼容老版本"),t("code",{pre:!0},[s._v("el-")]),s._v("前缀")])]),t("h3",{attrs:{id:"1.0.3"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1.0.3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.3")]),t("p",[t("em",[s._v("2018-09-15")])]),t("ul",[t("li",[s._v("新增Xtable组件。")]),t("li",[s._v("新增Xform组件。")]),t("li",[s._v("新增Echarts组件,自动销毁")]),t("li",[s._v("Tree/TreeX\n"),t("ul",[t("li",[s._v("新增allow-drag属性")]),t("li",[s._v("新增allow-drop属性")]),t("li",[s._v("新增node-dbclick事件,提供双击事件")])])]),t("li",[s._v("Popup\n"),t("ul",[t("li",[s._v("内存优化,解绑全局事件")])])]),t("li",[s._v("Message\n"),t("ul",[t("li",[s._v("修改showClose属性默认值为true")])])]),t("li",[s._v("文档\n"),t("ul",[t("li",[s._v("在线文档持续集成至 jenkins 自动部署发布。")])])])]),t("h3",{attrs:{id:"1.0.2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1.0.2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.2")]),t("p",[t("em",[s._v("2018-06-25")])]),t("ul",[t("li",[s._v("新增 ComboTree 组件。")]),t("li",[s._v("新增 ComboTable 组件。")]),t("li",[s._v("新增 Lazy 组件。")]),t("li",[s._v("新增 Dialog 的 draggable 属性。")]),t("li",[s._v("新增 DialogX 的 draggable 属性。")]),t("li",[s._v("MessageBox\n"),t("ul",[t("li",[s._v("修复确定与取消按钮位置。")])])]),t("li",[s._v("Loading\n"),t("ul",[t("li",[s._v("修复 this.$loading().close() 不能关闭遮罩的问题。")])])]),t("li",[s._v("Upload\n"),t("ul",[t("li",[s._v("修复IE9下不能正常使用问题。")]),t("li",[s._v("新增timeout属性。")]),t("li",[s._v("新增ontimeout钩子函数。")])])]),t("li",[s._v("文档\n"),t("ul",[t("li",[s._v("统一将文档调整为ES 5语法。")])])]),t("li",[s._v("编译\n"),t("ul",[t("li",[s._v("新增打包sourceMap源映射文件生成")])])])]),t("h3",{attrs:{id:"1.0.1"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1.0.1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.1")]),t("p",[t("em",[s._v("2018-03-20")])]),t("ul",[t("li",[s._v("新增 Input 的"),t("code",{pre:!0},[s._v("limit-char")]),s._v("属性。")]),t("li",[s._v("修复 Input 的去除值前后空格。")]),t("li",[s._v("TableX\n"),t("ul",[t("li",[s._v("单选、复选列宽度调整。")]),t("li",[s._v("新增行disable禁用属性,禁用行css样式提交(el-table__row__disabled应用于tr)")])])]),t("li",[s._v("FormX\n"),t("ul",[t("li",[s._v("新增数值框类型配置。")]),t("li",[s._v("下拉框类型支持复选配置。")]),t("li",[s._v("金额类型字段格式化配置")])])]),t("li",[s._v("Vue.js 依赖库升级为最新版本v2.5.13")])]),t("h3",{attrs:{id:"1.0.0"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1.0.0","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0")]),t("p",[t("em",[s._v("2018-02-27")])]),t("ul",[t("li",[s._v("新增 FormQ 组件。")]),t("li",[s._v("新增 FormX 组件。")]),t("li",[s._v("新增 TableX 组件。")]),t("li",[s._v("新增 TreeX 组件。")]),t("li",[s._v("新增 SelectX 组件。")]),t("li",[s._v("新增 RadioX 组件。")]),t("li",[s._v("新增 CheckboxX 组件。")]),t("li",[s._v("新增 CascaderX 组件。")]),t("li",[s._v("新增 DialogX 组件。")])]),t("h3",{attrs:{id:"0.1.0"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#0.1.0","aria-hidden":"true"}},[s._v("¶")]),s._v(" 0.1.0")]),t("p",[t("em",[s._v("2018-02-07")])]),t("ul",[t("li",[s._v("YUFP-PC 组件初始化版本,以 ElementUI-1.4.12 。")])])])}],!1,null,null,null).exports},data:function(){return{count:3}},mounted:function(){for(var s=this.$refs.changeLog,t=s.$el.children,a=t[1].querySelector("a"),l=(this.isIE()?a&&a.removeNode(!0):a&&a.remove(),t[1].textContent.trim()),n='<li><h3><a href="http://192.168.254.128/YUFP/yufp-widgets-pc/releases/tag/v'+l+'" target="_blank">'+l+"</a></h3>",e=t.length,r=2;r<e;r++){var v=t[r],a=t[r].querySelector("a");this.isIE()?a&&"header-anchor"===a.getAttribute("class")&&a.removeNode(!0):a&&"header-anchor"===a.getAttribute("class")&&a.remove(),"H3"!==v.tagName?n+=t[r].outerHTML:n+='</li><li><h3><a href="http://192.168.254.128/YUFP/yufp-widgets-pc/releases/tag/v'+(l=t[r].textContent.trim())+'" target="_blank">'+l+"</a></h3>"}n=(n=n.replace(/#(\d+)/g,'<a href="http://192.168.254.128/YUFP/yufp-widgets-pc/issues/$1" target="_blank">#$1</a>')).replace(/@(\w+)/g,'<a href="http://192.168.254.128/YUFP/yufp-widgets-pc/$1" target="_blank">@$1</a>'),this.$refs.timeline.innerHTML=n+"</li>",this.isIE()?s.$el.removeNode(!0):s.$el.remove()},methods:{isIE:function(){return!!(window.ActiveXObject||"ActiveXObject"in window)}}},a=(a(618),Object(l.a)(n,function(){var s=this.$createElement,s=this._self._c||s;return s("div",{staticClass:"page-changelog"},[s("div",{staticClass:"heading"},[this._v("\n Changelog\n ")]),s("ul",{ref:"timeline",staticClass:"timeline"}),s("change-log",{ref:"changeLog"})],1)},[],!1,null,null,null));t.default=a.exports},771:function(s,t,a){"use strict";a.r(t);var l=a(88),n=a(7),e={data:function(){return{lang:this.$route.meta.lang,navsData:l,hover:!1,showBackToTop:!1}},methods:{toTop:function(){this.hover=!1,this.showBackToTop=!1,document.body.scrollTop=0,document.documentElement.scrollTop=0},handleScroll:function(){this.showBackToTop=(document.body.scrollTop||document.documentElement.scrollTop)>=.5*document.body.clientHeight}},mounted:function(){this.throttledScrollHandler=Object(n.b)(300,this.handleScroll),document.addEventListener("scroll",this.throttledScrollHandler)},beforeDestroy:function(){document.removeEventListener("scroll",this.throttledScrollHandler)}},a=(a(619),a(0)),a=Object(a.a)(e,function(){var t=this,s=t.$createElement,s=t._self._c||s;return s("div",{staticClass:"page-container page-component"},[s("el-row",[s("el-col",{attrs:{xs:24,sm:6}},[s("side-nav",{attrs:{data:t.navsData[t.lang],base:"/"+t.lang+"/component"}})],1),s("el-col",{attrs:{xs:24,sm:18}},[s("router-view",{staticClass:"content"}),s("footer-nav")],1)],1),s("transition",{attrs:{name:"back-top-fade"}},[s("div",{directives:[{name:"show",rawName:"v-show",value:t.showBackToTop,expression:"showBackToTop"}],staticClass:"page-component-up",class:{hover:t.hover},on:{mouseenter:function(s){t.hover=!0},mouseleave:function(s){t.hover=!1},click:t.toTop}},[s("i",{staticClass:"el-icon-caret-top"})])])],1)},[],!1,null,null,null);t.default=a.exports},772:function(s,t,a){"use strict";a.r(t);var l={data:function(){return{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"Design Disciplines"},{path:"/nav",name:"Navigation"}]}}},a=(a(621),a(0)),a=Object(a.a)(l,function(){var s=this.$createElement,s=this._self._c||s;return s("div",{staticClass:"page-container page-guide"},[s("el-row",[s("el-col",{attrs:{xs:24,sm:5}},[s("side-nav",{attrs:{data:this.navsData,base:"/"+this.lang+"/guide"}})],1),s("el-col",{attrs:{xs:24,sm:19}},[s("router-view",{staticClass:"content"})],1)],1)],1)},[],!1,null,null,null);t.default=a.exports},773:function(s,t,a){"use strict";a.r(t);var l=[function(){var s=this.$createElement,s=this._self._c||s;return s("div",{staticClass:"banner"},[s("div",{staticClass:"banner-sky"}),s("img",{staticClass:"banner-stars",attrs:{src:a(472),alt:"Element"}}),s("div",{staticClass:"container"},[s("div",{staticClass:"banner-desc"},[s("h2",[this._v("A Desktop UI Library")]),s("div",{staticClass:"actor",attrs:{id:"line2"}}),s("p",[this._v("Element, a Vue 2.0 based component library for developers, designers and product managers")])]),s("img",{attrs:{src:a(473),alt:"Element"}})])])}],n=a(474),e=a.n(n),n={mounted:function(){var t=e()({maxSpeed:100});t.on("type:start, erase:start",function(){t.getCurrentActor().$element.classList.add("typing")}).on("type:end, erase:end",function(){t.getCurrentActor().$element.classList.remove("typing")}),t.addActor("line2",{speed:1,accuracy:1}).addScene(2600).addScene("line2:For ",500).addScene(function(s){!function t(a){a.addScene("product designers",1800,-17,800).addScene("UI designers",1800,-12,800).addScene("UX designers",1800,-12,800).addScene("product managers",1800,-16,800).addScene("FE developers",1800,-13,800).addScene(function(s){t(a),s()})}(t),s()})}},r=(a(622),a(0)),r=Object(r.a)(n,function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("div",[s._m(0),t("div",{staticClass:"cards"},[t("ul",{staticClass:"container"},[t("li",[t("div",{staticClass:"card"},[t("img",{attrs:{src:a(469),alt:""}}),t("h3",[s._v("Guide")]),t("p",[s._v("Understand the design guidelines, helping designers build product that's logically sound, reasonably structured and easy to use.")]),t("router-link",{attrs:{"active-class":"active",to:"/en-US/guide/design",exact:""}},[s._v("View Detail\n ")])],1)]),t("li",[t("div",{staticClass:"card"},[t("img",{attrs:{src:a(470),alt:""}}),t("h3",[s._v("Component")]),t("p",[s._v("Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.")]),t("router-link",{attrs:{"active-class":"active",to:"/en-US/component/layout",exact:""}},[s._v("View Detail\n ")])],1)]),t("li",[t("div",{staticClass:"card"},[t("img",{attrs:{src:a(471),alt:""}}),t("h3",[s._v("Resource")]),t("p",[s._v("Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.")]),t("router-link",{attrs:{"active-class":"active",to:"/en-US/resource",exact:""}},[s._v("View Detail\n ")])],1)])])])])},l,!1,null,"24030bc5",null);t.default=r.exports},774:function(s,t,a){"use strict";a.r(t);var l={data:function(){return{imgUrl:"",imgBound:{},showDialog:!1,imgStyle:{},imgWrapStyle:{}}},watch:{showDialog:function(s){document.body.style.overflow=s?"hidden":""}},methods:{enlarge:function(s,t){var a=t.target,l=document;l.body.scrollWidth,this.imgUrl=a.src,this.imgBound=a.getBoundingClientRect(),this.imgWrapStyle.transformOrigin=t.clientX+"px "+t.clientY+"px",this.imgStyle.width=s+"px",this.showDialog=!0}}},n=(a(623),a(0)),n=Object(n.a)(l,function(){var t=this,s=t.$createElement,s=t._self._c||s;return s("div",[s("h2",[t._v("Navigation")]),t._m(0),t._m(1),s("div",{staticClass:"block"},[s("h3",[t._v("Side Navigation")]),s("el-row",{attrs:{gutter:20}},[s("el-col",{attrs:{span:9}},[s("p",[t._v("Fix the navigation at the left edge, thus improves its visibility, making it easier to switch between pages. In this case, the top area of the page holds commonly used tools, e.g. search bar, help button, notice button, etc. Suitable for background management or utility websites.")])]),s("el-col",{staticClass:"nav-demos",attrs:{span:15}},[s("img",{attrs:{src:a(476),alt:"Level 1 categories"},on:{click:function(s){t.enlarge(846,s)}}}),s("h5",[t._v("Level 1 categories")]),s("p",[t._v("Suitable for simply structured sites with only one level of pages. No breadcrumb is needed.")]),s("img",{attrs:{src:a(477),alt:"Level 2 categories"},on:{click:function(s){t.enlarge(846,s)}}}),s("h5",[t._v("Level 2 categories")]),s("p",[t._v("Sidebar displays up to two levels of navigation. Breadcrumbs are recommended in combination of second level navigation, making it easier for the users to locate and navigate.")]),s("img",{attrs:{src:a(478),alt:"Level 3 categories"},on:{click:function(s){t.enlarge(846,s)}}}),s("h5",[t._v("Level 3 categories")]),s("p",[t._v("Suitable for complicated utility websites. The left sidebar holds first level navigation, and the middle column displays second level navigation or other utility options.")])])],1)],1),s("div",{staticClass:"block"},[s("h3",[t._v("Top Navigation")]),s("el-row",[s("el-col",{attrs:{span:10}},[s("p",[t._v("Conforms to the normal browsing order from top to bottom, which makes things more natural. The navigation amount and text length are limited to the width of the top.")])]),s("el-col",{staticClass:"nav-demos",attrs:{span:14}},[s("img",{attrs:{src:a(479),alt:""},on:{click:function(s){t.enlarge(846,s)}}}),s("p",[t._v("Suitable for sites with few navigations and large chunks.")])])],1)],1),s("transition",{attrs:{name:"fade"}},[s("div",{directives:[{name:"show",rawName:"v-show",value:t.showDialog,expression:"showDialog"}],staticClass:"mask",on:{click:function(s){t.showDialog=!1}}})]),s("transition",{attrs:{name:"zoom"}},[s("div",{directives:[{name:"show",rawName:"v-show",value:t.showDialog,expression:"showDialog"}],staticClass:"dialog-img",style:t.imgWrapStyle,on:{click:function(s){t.showDialog=!1}}},[s("div",{staticClass:"imgWrap",style:t.imgStyle},[s("img",{attrs:{src:t.imgUrl,alt:""}})])])])],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("div",{staticClass:"block"},[s("p",[this._v("Navigation focuses on solving the users' problems of where to go and how to get there. Generally it can be categorized into 'sidebar navigation' and 'top navigation'.")])])},function(){var s=this.$createElement,s=this._self._c||s;return s("div",{staticClass:"block"},[s("h3",[this._v("Choose the right navigation")]),s("p",[this._v("An appropriate navigation gives users a smooth experience, while an inappropriate one leads to confusion. Here are the differences between sidebar navigation and top navigation")])])}],!1,null,"45f73eac",null);t.default=n.exports},845:function(s,t,a){"use strict";a.r(t);var l={methods:{hello:function(){alert("Hello World!")}}},a=(a(722),a(0)),a=Object(a.a)(l,function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("section",[s._m(0),t("p",[s._v("Displays important alert messages.")]),s._m(1),t("p",[s._v("Alert components are non-overlay elements in the page that does not disappear automatically.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-alert title="success alert" type="success">\n </el-alert>\n <el-alert title="info alert" type="info">\n </el-alert>\n <el-alert title="warning alert" type="warning">\n </el-alert>\n <el-alert title="error alert" type="error">\n </el-alert>\n</template>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-alert",{attrs:{title:"success alert",type:"success"}}),t("el-alert",{attrs:{title:"info alert",type:"info"}}),t("el-alert",{attrs:{title:"warning alert",type:"warning"}}),t("el-alert",{attrs:{title:"error alert",type:"error"}})]],2),t("p",[s._v("Alert provides 4 types of themes defined by "),t("code",[s._v("type")]),s._v(", whose default value is "),t("code",[s._v("info")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success alert"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"info alert"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"warning alert"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"error alert"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"error"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Customize the close button as texts or other symbols.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-alert title="unclosable alert" type="success" :closable="false">\n </el-alert>\n <el-alert title="customized close-text" type="info" close-text="Gotcha">\n </el-alert>\n <el-alert title="alert with callback" type="warning" @close="hello">\n </el-alert>\n</template>\n\n\n',script:"\n export default {\n methods: {\n hello: function() {\n alert('Hello World!');\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-alert",{attrs:{title:"unclosable alert",type:"success",closable:!1}}),t("el-alert",{attrs:{title:"customized close-text",type:"info","close-text":"Gotcha"}}),t("el-alert",{attrs:{title:"alert with callback",type:"warning"},on:{close:s.hello}})]],2),t("p",[s._v("Alert allows you to configure if it's closable. The close button text and closing callbacks are also customizable. "),t("code",[s._v("closable")]),s._v(" attribute decides if the component can be closed or not. It accepts "),t("code",[s._v("boolean")]),s._v(", and the default is "),t("code",[s._v("true")]),s._v(". You can set "),t("code",[s._v("close-text")]),s._v(" attribute to replace the default cross symbol as the close button. Be careful that "),t("code",[s._v("close-text")]),s._v(" must be a string. "),t("code",[s._v("close")]),s._v(" event fires when the component is closed.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"unclosable alert"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":closable")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"customized close-text"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("close-text")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Gotcha"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"alert with callback"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@close")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"hello"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("hello")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}}),s._v(") ")]),s._v("{\n alert("),t("span",{attrs:{class:"hljs-string"}},[s._v("'Hello World!'")]),s._v(");\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Displaying an icon improves readability.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-alert title="success alert" type="success" show-icon>\n </el-alert>\n <el-alert title="info alert" type="info" show-icon>\n </el-alert>\n <el-alert title="warning alert" type="warning" show-icon>\n </el-alert>\n <el-alert title="error alert" type="error" show-icon>\n </el-alert>\n</template>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-alert",{attrs:{title:"success alert",type:"success","show-icon":""}}),t("el-alert",{attrs:{title:"info alert",type:"info","show-icon":""}}),t("el-alert",{attrs:{title:"warning alert",type:"warning","show-icon":""}}),t("el-alert",{attrs:{title:"error alert",type:"error","show-icon":""}})]],2),t("p",[s._v("Setting the "),t("code",[s._v("show-icon")]),s._v(" attribute displays an icon that corresponds with the current Alert type.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success alert"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"info alert"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"warning alert"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"error alert"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"error"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("Description includes a message with more detailed information.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-alert title="with description" type="success" description="This is a description.">\n </el-alert>\n</template>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-alert",{attrs:{title:"with description",type:"success",description:"This is a description."}})]],2),t("p",[s._v("Besides the required "),t("code",[s._v("title")]),s._v(" attribute, you can add a "),t("code",[s._v("description")]),s._v(" attribute to help you describe the alert with more details. Description can only store text string, and it will word wrap automatically.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"with description"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"This is a description."')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-alert title="success alert" type="success" description="more text description" show-icon>\n </el-alert>\n <el-alert title="info alert" type="info" description="more text description" show-icon>\n </el-alert>\n <el-alert title="warning alert" type="warning" description="more text description" show-icon>\n </el-alert>\n <el-alert title="error alert" type="error" description="more text description" show-icon>\n </el-alert>\n</template>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-alert",{attrs:{title:"success alert",type:"success",description:"more text description","show-icon":""}}),t("el-alert",{attrs:{title:"info alert",type:"info",description:"more text description","show-icon":""}}),t("el-alert",{attrs:{title:"warning alert",type:"warning",description:"more text description","show-icon":""}}),t("el-alert",{attrs:{title:"error alert",type:"error",description:"more text description","show-icon":""}})]],2),t("p",[s._v("At last, this is an example with both icon and description.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success alert"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"more text description"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"info alert"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"more text description"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"warning alert"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"more text description"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"error alert"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"error"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"more text description"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"alert"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alert")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"basic-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"customizable-close-button"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#customizable-close-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customizable close button")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"with-icon"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#with-icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" With icon")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"with-description"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#with-description","aria-hidden":"true"}},[this._v("¶")]),this._v(" With description")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"with-icon-and-description"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#with-icon-and-description","aria-hidden":"true"}},[this._v("¶")]),this._v(" With icon and description")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[t("strong",[s._v("title")])]),t("td",[s._v("title "),t("strong",[s._v("REQUIRED")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("component type")]),t("td",[s._v("string")]),t("td",[s._v("success/warning/info/error")]),t("td",[s._v("info")])]),t("tr",[t("td",[s._v("description")]),t("td",[s._v("descriptive text. Can also be passed with the default slot")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("closable")]),t("td",[s._v("if closable or not")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("close-text")]),t("td",[s._v("customized close button text")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("show-icon")]),t("td",[s._v("if a type icon is displayed")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"events"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Event Name")]),t("th",[s._v("Description")]),t("th",[s._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[s._v("close")]),t("td",[s._v("fires when alert is closed")]),t("td",[s._v("—")])])])])}],!1,null,null,null);t.default=a.exports},846:function(s,t,a){"use strict";a.r(t);var l=a(1),n={data:function(){return{isLoading:!1,isLoading2:!1}},methods:{handleClick:function(s){console.log(s),alert("button clicked!")}},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source")[2];Object(l.a)(s,"intro-block")})}},a=(a(724),a(0)),a=Object(a.a)(n,function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("section",[s._m(0),t("p",[s._v("Commonly used button.")]),s._m(1),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button>Default Button</el-button>\n<el-button type="primary">Primary Button</el-button>\n<el-button type="text">Text Button</el-button>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-button",[s._v("Default Button")]),t("el-button",{attrs:{type:"primary"}},[s._v("Primary Button")]),t("el-button",{attrs:{type:"text"}},[s._v("Text Button")])],1),t("p",[s._v("Button provides 7 themes defined by the "),t("code",[s._v("type")]),s._v(" attribute.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("Default Button"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("Primary Button"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(">")]),s._v("Text Button"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button :plain="true" :disabled="true">Default Button</el-button>\n<el-button type="primary" disabled>Primary Button</el-button>\n<el-button type="text" disabled>Text Button</el-button>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-button",{attrs:{plain:!0,disabled:!0}},[s._v("Default Button")]),t("el-button",{attrs:{type:"primary",disabled:""}},[s._v("Primary Button")]),t("el-button",{attrs:{type:"text",disabled:""}},[s._v("Text Button")])],1),t("p",[s._v("Use "),t("code",[s._v("disabled")]),s._v(" attribute to determine whether a button is disabled. It accepts a "),t("code",[s._v("Boolean")]),s._v(" value.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":disabled")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(">")]),s._v("Default Button"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Primary Button"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Text Button"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("Different colors represent different meanings.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n <span class="demonstration">Default</span>\n <span class="wrapper">\n <el-button type="success">Success</el-button>\n <el-button type="warning">Warning</el-button>\n <el-button type="danger">Danger</el-button>\n <el-button type="info">Info</el-button>\n </span>\n</div>\n<div class="block">\n <span class="demonstration">Hover to display color</span>\n <span class="wrapper">\n <el-button :plain="true" type="success">Success</el-button>\n <el-button :plain="true" type="warning">Warning</el-button>\n <el-button :plain="true" type="danger">Danger</el-button>\n <el-button :plain="true" type="info">Info</el-button>\n </span>\n</div>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Default")]),t("span",{staticClass:"wrapper"},[t("el-button",{attrs:{type:"success"}},[s._v("Success")]),t("el-button",{attrs:{type:"warning"}},[s._v("Warning")]),t("el-button",{attrs:{type:"danger"}},[s._v("Danger")]),t("el-button",{attrs:{type:"info"}},[s._v("Info")])],1)]),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[s._v("Hover to display color")]),t("span",{staticClass:"wrapper"},[t("el-button",{attrs:{plain:!0,type:"success"}},[s._v("Success")]),t("el-button",{attrs:{plain:!0,type:"warning"}},[s._v("Warning")]),t("el-button",{attrs:{plain:!0,type:"danger"}},[s._v("Danger")]),t("el-button",{attrs:{plain:!0,type:"info"}},[s._v("Info")])],1)])]),t("p",[s._v("Use "),t("code",[s._v("plain")]),s._v(" attribute to create a plain button, and it accepts a "),t("code",[s._v("Boolean")]),s._v(" value. You can assign different "),t("code",[s._v("type")]),s._v(" to a plain button as mentioned above. "),t("strong",[s._v("Note")]),s._v(": When using the plain button, you still can set "),t("code",[s._v("type")]),s._v(" to "),t("code",[s._v("text")]),s._v(", but it makes no difference. A plain button will be styled like a "),t("code",[s._v("text button")]),s._v(" by default.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"wrapper"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),s._v("Success"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(">")]),s._v("Warning"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v(">")]),s._v("Danger"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(">")]),s._v("Info"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Hover to display color"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"wrapper"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),s._v("Success"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(">")]),s._v("Warning"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v(">")]),s._v("Danger"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(">")]),s._v("Info"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n")])])])]),s._m(5),t("p",[s._v("Use icons to add more meaning to Button. You can use icon alone to save some space, or with text together.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button type="primary" icon="edit"></el-button>\n<el-button type="primary" icon="share"></el-button>\n<el-button type="primary" icon="delete"></el-button>\n<el-button type="primary" icon="search">Search</el-button>\n<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-button",{attrs:{type:"primary",icon:"edit"}}),t("el-button",{attrs:{type:"primary",icon:"share"}}),t("el-button",{attrs:{type:"primary",icon:"delete"}}),t("el-button",{attrs:{type:"primary",icon:"search"}},[s._v("Search")]),t("el-button",{attrs:{type:"primary"}},[s._v("Upload"),t("i",{staticClass:"el-icon-upload el-icon-right"})])],1),t("p",[s._v("Use the "),t("code",[s._v("icon")]),s._v(" attribute to add icon. You can find the icon list in YUFP icon component. Adding icons to the right side of the text is achievable with an "),t("code",[s._v("<i>")]),s._v(" tag. Custom icons can be used as well.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"edit"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"share"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"delete"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"search"')]),s._v(">")]),s._v("Search"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("Upload"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-upload el-icon-right"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(6),t("p",[s._v("Displayed as a button group, can be used to group a series of similar operations.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button-group>\n <el-button type="primary" icon="arrow-left">Previous Page</el-button>\n <el-button type="primary">Next Page<i class="el-icon-arrow-right el-icon-right"></i></el-button>\n</el-button-group>\n<el-button-group>\n <el-button type="primary" icon="edit"></el-button>\n <el-button type="primary" icon="share"></el-button>\n <el-button type="primary" icon="delete"></el-button>\n</el-button-group>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-button-group",[t("el-button",{attrs:{type:"primary",icon:"arrow-left"}},[s._v("Previous Page")]),t("el-button",{attrs:{type:"primary"}},[s._v("Next Page"),t("i",{staticClass:"el-icon-arrow-right el-icon-right"})])],1),t("el-button-group",[t("el-button",{attrs:{type:"primary",icon:"edit"}}),t("el-button",{attrs:{type:"primary",icon:"share"}}),t("el-button",{attrs:{type:"primary",icon:"delete"}})],1)],1),t("p",[s._v("Use tag "),t("code",[s._v("<el-button-group>")]),s._v(" to group your buttons.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button-group")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"arrow-left"')]),s._v(">")]),s._v("Previous Page"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("Next Page"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-right el-icon-right"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button-group")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button-group")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"edit"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"share"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"delete"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button-group")]),s._v(">")]),s._v("\n")])])])]),s._m(7),t("p",[s._v("Click the button to load data, then the button displays a loading state.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button type="primary" :loading="true">Loading</el-button>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-button",{attrs:{type:"primary",loading:!0}},[s._v("Loading")])],1),t("p",[s._v("Set "),t("code",[s._v("loading")]),s._v(" attribute to "),t("code",[s._v("true")]),s._v(" to display loading state.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":loading")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(">")]),s._v("Loading"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(8),t("p",[s._v("Besides default size, Button component provides three additional sizes for you to choose among different scenarios.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button type="primary" size="large">Large Button</el-button>\n<el-button type="primary">Default Button</el-button>\n<el-button type="primary" size="small">Small Button</el-button>\n<el-button type="primary" size="mini">Mini Button</el-button>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-button",{attrs:{type:"primary",size:"large"}},[s._v("Large Button")]),t("el-button",{attrs:{type:"primary"}},[s._v("Default Button")]),t("el-button",{attrs:{type:"primary",size:"small"}},[s._v("Small Button")]),t("el-button",{attrs:{type:"primary",size:"mini"}},[s._v("Mini Button")])],1),t("p",[s._v("Use attribute "),t("code",[s._v("size")]),s._v(" to set additional sizes with "),t("code",[s._v("large")]),s._v(", "),t("code",[s._v("small")]),s._v(" or "),t("code",[s._v("mini")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"large"')]),s._v(">")]),s._v("Large Button"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("Default Button"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("Small Button"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(">")]),s._v("Mini Button"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(9),s._m(10)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"button"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Button")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"basic-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"disabled-button"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#disabled-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled Button")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[s._v("The "),t("code",{pre:!0},[s._v("disableds")]),s._v(" attribute determines if the button is disabled.")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"color-indication"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#color-indication","aria-hidden":"true"}},[this._v("¶")]),this._v(" Color Indication")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"icon-button"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#icon-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icon Button")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"button-group"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#button-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Button Group")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"loading-button"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#loading-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Loading Button")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"sizes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sizes")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("size")]),t("td",[s._v("button size")]),t("td",[s._v("string")]),t("td",[s._v("large/small/mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("button type")]),t("td",[s._v("string")]),t("td",[s._v("primary/success/warning/danger/info/text")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("plain")]),t("td",[s._v("determine whether it's a plain button")]),t("td",[s._v("Boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("loading")]),t("td",[s._v("determine whether it's loading")]),t("td",[s._v("Boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("disable the button")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("icon")]),t("td",[s._v("button icon, accepts an icon name of YufpWP icon component")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("autofocus")]),t("td",[s._v("same as native button's "),t("code",{pre:!0},[s._v("autofocus")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("native-type")]),t("td",[s._v("same as native button's "),t("code",{pre:!0},[s._v("type")])]),t("td",[s._v("string")]),t("td",[s._v("button/submit/reset")]),t("td",[s._v("button")])])])])}],!1,null,null,null);t.default=a.exports},847:function(s,t,n){"use strict";n.r(t);var a=n(9),l=n.n(a),a={data:function(){return{currentDate:l.a.format(new Date,"yyyy-MM-dd HH:mm")}}},e=(n(725),n(0)),e=Object(e.a)(a,function(){var a=this,s=a.$createElement,l=a._self._c||s;return l("section",[a._m(0),l("p",[a._v("Integrate information in a card container.")]),a._m(1),l("p",[a._v("Card includes title, content and operations.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-card class="box-card">\n <div slot="header" class="clearfix">\n <span style="line-height: 36px;">Card name</span>\n <el-button style="float: right;" type="primary">Operation button</el-button>\n </div>\n <div v-for="o in 4" :key="o" class="text item">\n {{\'List item \' + o }}\n </div>\n</el-card>\n\n\n',script:null,style:'\n .text {\n font-size: 14px;\n }\n\n .item {\n padding: 18px 0;\n }\n\n .clearfix:before,\n .clearfix:after {\n display: table;\n content: "";\n }\n .clearfix:after {\n clear: both\n }\n\n .box-card {\n width: 480px;\n }\n'}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[l("el-card",{staticClass:"box-card"},[l("div",{staticClass:"clearfix",attrs:{slot:"header"},slot:"header"},[l("span",{staticStyle:{"line-height":"36px"}},[a._v("Card name")]),l("el-button",{staticStyle:{float:"right"},attrs:{type:"primary"}},[a._v("Operation button")])],1),a._l(4,function(s){return l("div",{key:s,staticClass:"text item"},[a._v("\n "+a._s("List item "+s)+"\n ")])})],2)],1),l("p",[a._v("Card is made up of "),l("code",[a._v("header")]),a._v(" and "),l("code",[a._v("body")]),a._v(". "),l("code",[a._v("header")]),a._v(" is optional, and its content distribution depends on a named slot.")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-card")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("class")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"box-card"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("div")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("slot")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"header"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("class")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"clearfix"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("span")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("style")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"line-height: 36px;"')]),a._v(">")]),a._v("Card name"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("span")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("style")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"float: right;"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"primary"')]),a._v(">")]),a._v("Operation button"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("div")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("div")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-for")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"o in 4"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":key")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"o"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("class")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"text item"')]),a._v(">")]),a._v("\n {{'List item ' + o }}\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("div")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-card")]),a._v(">")]),a._v("\n\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("style")]),a._v(">")]),l("span",{attrs:{class:"css"}},[a._v("\n "),l("span",{attrs:{class:"hljs-selector-class"}},[a._v(".text")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[a._v("font-size")]),a._v(": "),l("span",{attrs:{class:"hljs-number"}},[a._v("14px")]),a._v(";\n }\n\n "),l("span",{attrs:{class:"hljs-selector-class"}},[a._v(".item")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[a._v("padding")]),a._v(": "),l("span",{attrs:{class:"hljs-number"}},[a._v("18px")]),a._v(" "),l("span",{attrs:{class:"hljs-number"}},[a._v("0")]),a._v(";\n }\n\n "),l("span",{attrs:{class:"hljs-selector-class"}},[a._v(".clearfix")]),l("span",{attrs:{class:"hljs-selector-pseudo"}},[a._v(":before")]),a._v(",\n "),l("span",{attrs:{class:"hljs-selector-class"}},[a._v(".clearfix")]),l("span",{attrs:{class:"hljs-selector-pseudo"}},[a._v(":after")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[a._v("display")]),a._v(": table;\n "),l("span",{attrs:{class:"hljs-attribute"}},[a._v("content")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v('""')]),a._v(";\n }\n "),l("span",{attrs:{class:"hljs-selector-class"}},[a._v(".clearfix")]),l("span",{attrs:{class:"hljs-selector-pseudo"}},[a._v(":after")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[a._v("clear")]),a._v(": both\n }\n\n "),l("span",{attrs:{class:"hljs-selector-class"}},[a._v(".box-card")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[a._v("width")]),a._v(": "),l("span",{attrs:{class:"hljs-number"}},[a._v("480px")]),a._v(";\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("style")]),a._v(">")]),a._v("\n")])])])]),a._m(2),l("p",[a._v("The header part can be omitted.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-card class="box-card">\n <div v-for="o in 4" :key="o" class="text item">\n {{\'List item \' + o }}\n </div>\n</el-card>\n\n\n',script:null,style:"\n .text {\n font-size: 14px;\n }\n\n .item {\n padding: 18px 0;\n }\n\n .box-card {\n width: 480px;\n }\n"}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[l("el-card",{staticClass:"box-card"},a._l(4,function(s){return l("div",{key:s,staticClass:"text item"},[a._v("\n "+a._s("List item "+s)+"\n ")])}))],1),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-card")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("class")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"box-card"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("div")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-for")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"o in 4"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":key")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"o"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("class")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"text item"')]),a._v(">")]),a._v("\n {{'List item ' + o }}\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("div")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-card")]),a._v(">")]),a._v("\n\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("style")]),a._v(">")]),l("span",{attrs:{class:"css"}},[a._v("\n "),l("span",{attrs:{class:"hljs-selector-class"}},[a._v(".text")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[a._v("font-size")]),a._v(": "),l("span",{attrs:{class:"hljs-number"}},[a._v("14px")]),a._v(";\n }\n\n "),l("span",{attrs:{class:"hljs-selector-class"}},[a._v(".item")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[a._v("padding")]),a._v(": "),l("span",{attrs:{class:"hljs-number"}},[a._v("18px")]),a._v(" "),l("span",{attrs:{class:"hljs-number"}},[a._v("0")]),a._v(";\n }\n\n "),l("span",{attrs:{class:"hljs-selector-class"}},[a._v(".box-card")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[a._v("width")]),a._v(": "),l("span",{attrs:{class:"hljs-number"}},[a._v("480px")]),a._v(";\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("style")]),a._v(">")]),a._v("\n")])])])]),a._m(3),l("p",[a._v("Display richer content by adding some configs.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row>\n <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">\n <el-card :body-style="{ padding: \'0px\' }">\n <img src="~@/examples/assets/images/hamburger.png" class="image">\n <div style="padding: 14px;">\n <span>Yummy hamburger</span>\n <div class="bottom clearfix">\n <time class="time">{{ currentDate }}</time>\n <el-button type="text" class="button">Operating button</el-button>\n </div>\n </div>\n </el-card>\n </el-col>\n</el-row>\n\n\n\n\n',script:"\nexport default {\n data: function() {\n return {\n currentDate: new Date()\n };\n }\n}\n",style:'\n .time {\n font-size: 13px;\n color: #999;\n }\n \n .bottom {\n margin-top: 13px;\n line-height: 12px;\n }\n\n .button {\n padding: 0;\n float: right;\n }\n\n .image {\n width: 100%;\n display: block;\n }\n\n .clearfix:before,\n .clearfix:after {\n display: table;\n content: "";\n }\n \n .clearfix:after {\n clear: both\n }\n'}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[l("el-row",a._l(2,function(s,t){return l("el-col",{key:s,attrs:{span:8,offset:0<t?2:0}},[l("el-card",{attrs:{"body-style":{padding:"0px"}}},[l("img",{staticClass:"image",attrs:{src:n(500)}}),l("div",{staticStyle:{padding:"14px"}},[l("span",[a._v("Yummy hamburger")]),l("div",{staticClass:"bottom clearfix"},[l("time",{staticClass:"time"},[a._v(a._s(a.currentDate))]),l("el-button",{staticClass:"button",attrs:{type:"text"}},[a._v("Operating button")])],1)])])],1)}))],1),l("p",[a._v("The "),l("code",[a._v("body-style")]),a._v(" attribute defines CSS style of custom "),l("code",[a._v("body")]),a._v(". This example also uses "),l("code",[a._v("el-col")]),a._v(" for layout.")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-row")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-col")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":span")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"8"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-for")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"(o, index) in 2"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":key")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"o"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":offset")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"index > 0 ? 2 : 0"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-card")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":body-style")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v("\"{ padding: '0px' }\"")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("img")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("src")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"~@/examples/assets/images/hamburger.png"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("class")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"image"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("div")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("style")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"padding: 14px;"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("span")]),a._v(">")]),a._v("Yummy hamburger"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("span")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("div")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("class")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"bottom clearfix"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("time")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("class")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"time"')]),a._v(">")]),a._v("{{ currentDate }}"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("time")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"text"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("class")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"button"')]),a._v(">")]),a._v("Operating button"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("div")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("div")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-card")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-col")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-row")]),a._v(">")]),a._v("\n\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("style")]),a._v(">")]),l("span",{attrs:{class:"css"}},[a._v("\n "),l("span",{attrs:{class:"hljs-selector-class"}},[a._v(".time")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[a._v("font-size")]),a._v(": "),l("span",{attrs:{class:"hljs-number"}},[a._v("13px")]),a._v(";\n "),l("span",{attrs:{class:"hljs-attribute"}},[a._v("color")]),a._v(": "),l("span",{attrs:{class:"hljs-number"}},[a._v("#999")]),a._v(";\n }\n \n "),l("span",{attrs:{class:"hljs-selector-class"}},[a._v(".bottom")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[a._v("margin-top")]),a._v(": "),l("span",{attrs:{class:"hljs-number"}},[a._v("13px")]),a._v(";\n "),l("span",{attrs:{class:"hljs-attribute"}},[a._v("line-height")]),a._v(": "),l("span",{attrs:{class:"hljs-number"}},[a._v("12px")]),a._v(";\n }\n\n "),l("span",{attrs:{class:"hljs-selector-class"}},[a._v(".button")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[a._v("padding")]),a._v(": "),l("span",{attrs:{class:"hljs-number"}},[a._v("0")]),a._v(";\n "),l("span",{attrs:{class:"hljs-attribute"}},[a._v("float")]),a._v(": right;\n }\n\n "),l("span",{attrs:{class:"hljs-selector-class"}},[a._v(".image")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[a._v("width")]),a._v(": "),l("span",{attrs:{class:"hljs-number"}},[a._v("100%")]),a._v(";\n "),l("span",{attrs:{class:"hljs-attribute"}},[a._v("display")]),a._v(": block;\n }\n\n "),l("span",{attrs:{class:"hljs-selector-class"}},[a._v(".clearfix")]),l("span",{attrs:{class:"hljs-selector-pseudo"}},[a._v(":before")]),a._v(",\n "),l("span",{attrs:{class:"hljs-selector-class"}},[a._v(".clearfix")]),l("span",{attrs:{class:"hljs-selector-pseudo"}},[a._v(":after")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[a._v("display")]),a._v(": table;\n "),l("span",{attrs:{class:"hljs-attribute"}},[a._v("content")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v('""')]),a._v(";\n }\n \n "),l("span",{attrs:{class:"hljs-selector-class"}},[a._v(".clearfix")]),l("span",{attrs:{class:"hljs-selector-pseudo"}},[a._v(":after")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[a._v("clear")]),a._v(": both\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("style")]),a._v(">")]),a._v("\n\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),l("span",{attrs:{class:"javascript"}},[a._v("\n"),l("span",{attrs:{class:"hljs-keyword"}},[a._v("export")]),a._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("default")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("data")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("currentDate")]),a._v(": "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("new")]),a._v(" "),l("span",{attrs:{class:"hljs-built_in"}},[a._v("Date")]),a._v("()\n };\n }\n}\n")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),a._v("\n")])])])]),a._m(4),a._m(5)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"card"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#card","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"basic-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"simple-card"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#simple-card","aria-hidden":"true"}},[this._v("¶")]),this._v(" Simple card")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"with-images"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#with-images","aria-hidden":"true"}},[this._v("¶")]),this._v(" With images")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("header")]),t("td",[s._v("Title of the card. Also accepts a DOM passed by "),t("code",{pre:!0},[s._v("slot#header")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("body-style")]),t("td",[s._v("CSS style of body")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("{ padding: '20px' }")])])])])}],!1,null,"eb908420",null);t.default=e.exports},848:function(s,t,a){"use strict";a.r(t);var l={mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source");s[0].style.padding="0",s[0].className+=" small",s[3].className+=" medium"})}},a=(a(726),a(0)),a=Object(a.a)(l,function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("section",[t._m(0),a("p",[t._v("Loop a series of images or texts in a limited space")]),t._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div class="block">\n <span class="demonstration">Switch when indicator is hovered (default)</span>\n <el-carousel height="150px">\n <el-carousel-item v-for="item in 4" :key="item">\n <h3>{{ item }}</h3>\n </el-carousel-item>\n </el-carousel>\n </div>\n <div class="block">\n <span class="demonstration">Switch when indicator is clicked</span>\n <el-carousel trigger="click" height="150px">\n <el-carousel-item v-for="item in 4" :key="item">\n <h3>{{ item }}</h3>\n </el-carousel-item>\n </el-carousel>\n </div>\n</template>\n\n\n',script:null,style:"\n .el-carousel__item h3 {\n color: #475669;\n font-size: 14px;\n opacity: 0.75;\n line-height: 150px;\n margin: 0;\n }\n\n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n\n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Switch when indicator is hovered (default)")]),a("el-carousel",{attrs:{height:"150px"}},t._l(4,function(s){return a("el-carousel-item",{key:s},[a("h3",[t._v(t._s(s))])])}))],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[t._v("Switch when indicator is clicked")]),a("el-carousel",{attrs:{trigger:"click",height:"150px"}},t._l(4,function(s){return a("el-carousel-item",{key:s},[a("h3",[t._v(t._s(s))])])}))],1)]],2),a("p",[t._v("Combine "),a("code",[t._v("el-carousel")]),t._v(" with "),a("code",[t._v("el-carousel-item")]),t._v(", and you'll get a carousel. Content of each slide is completely customizable, and you just need to place it inside "),a("code",[t._v("el-carousel-item")]),t._v(" tag. By default the carousel switches when mouse hovers over an indicator. Set "),a("code",[t._v("trigger")]),t._v(" to "),a("code",[t._v("click")]),t._v(", and the carousel switches only when an indicator is clicked.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"demonstration"')]),t._v(">")]),t._v("Switch when indicator is hovered (default)"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-carousel")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("height")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"150px"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-carousel-item")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-for")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item in 4"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":key")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("h3")]),t._v(">")]),t._v("{{ item }}"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("h3")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-carousel-item")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-carousel")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"demonstration"')]),t._v(">")]),t._v("Switch when indicator is clicked"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-carousel")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("trigger")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"click"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("height")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"150px"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-carousel-item")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-for")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item in 4"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":key")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("h3")]),t._v(">")]),t._v("{{ item }}"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("h3")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-carousel-item")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-carousel")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("style")]),t._v(">")]),a("span",{attrs:{class:"css"}},[t._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[t._v(".el-carousel__item")]),t._v(" "),a("span",{attrs:{class:"hljs-selector-tag"}},[t._v("h3")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[t._v("color")]),t._v(": "),a("span",{attrs:{class:"hljs-number"}},[t._v("#475669")]),t._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[t._v("font-size")]),t._v(": "),a("span",{attrs:{class:"hljs-number"}},[t._v("14px")]),t._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[t._v("opacity")]),t._v(": "),a("span",{attrs:{class:"hljs-number"}},[t._v("0.75")]),t._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[t._v("line-height")]),t._v(": "),a("span",{attrs:{class:"hljs-number"}},[t._v("150px")]),t._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[t._v("margin")]),t._v(": "),a("span",{attrs:{class:"hljs-number"}},[t._v("0")]),t._v(";\n }\n\n "),a("span",{attrs:{class:"hljs-selector-class"}},[t._v(".el-carousel__item")]),a("span",{attrs:{class:"hljs-selector-pseudo"}},[t._v(":nth-child(2n)")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[t._v("background-color")]),t._v(": "),a("span",{attrs:{class:"hljs-number"}},[t._v("#99a9bf")]),t._v(";\n }\n\n "),a("span",{attrs:{class:"hljs-selector-class"}},[t._v(".el-carousel__item")]),a("span",{attrs:{class:"hljs-selector-pseudo"}},[t._v(":nth-child(2n+1)")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[t._v("background-color")]),t._v(": "),a("span",{attrs:{class:"hljs-number"}},[t._v("#d3dce6")]),t._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("style")]),t._v(">")]),t._v("\n")])])])]),t._m(2),a("p",[t._v("Indicators can be displayed outside the carousel")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-carousel indicator-position="outside">\n <el-carousel-item v-for="item in 4" :key="item">\n <h3>{{ item }}</h3>\n </el-carousel-item>\n </el-carousel>\n</template>\n\n\n',script:null,style:"\n .el-carousel__item h3 {\n color: #475669;\n font-size: 18px;\n opacity: 0.75;\n line-height: 300px;\n margin: 0;\n }\n\n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n\n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-carousel",{attrs:{"indicator-position":"outside"}},t._l(4,function(s){return a("el-carousel-item",{key:s},[a("h3",[t._v(t._s(s))])])}))]],2),a("p",[t._v("The "),a("code",[t._v("indicator-position")]),t._v(" attribute determines where the indicators are located. By default they are inside the carousel, and setting "),a("code",[t._v("indicator-position")]),t._v(" to "),a("code",[t._v("outside")]),t._v(" moves them outside; setting "),a("code",[t._v("indicator-position")]),t._v(" to "),a("code",[t._v("none")]),t._v(" hides the indicators.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-carousel")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("indicator-position")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"outside"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-carousel-item")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-for")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item in 4"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":key")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("h3")]),t._v(">")]),t._v("{{ item }}"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("h3")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-carousel-item")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-carousel")]),t._v(">")]),t._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("style")]),t._v(">")]),a("span",{attrs:{class:"css"}},[t._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[t._v(".el-carousel__item")]),t._v(" "),a("span",{attrs:{class:"hljs-selector-tag"}},[t._v("h3")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[t._v("color")]),t._v(": "),a("span",{attrs:{class:"hljs-number"}},[t._v("#475669")]),t._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[t._v("font-size")]),t._v(": "),a("span",{attrs:{class:"hljs-number"}},[t._v("18px")]),t._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[t._v("opacity")]),t._v(": "),a("span",{attrs:{class:"hljs-number"}},[t._v("0.75")]),t._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[t._v("line-height")]),t._v(": "),a("span",{attrs:{class:"hljs-number"}},[t._v("300px")]),t._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[t._v("margin")]),t._v(": "),a("span",{attrs:{class:"hljs-number"}},[t._v("0")]),t._v(";\n }\n\n "),a("span",{attrs:{class:"hljs-selector-class"}},[t._v(".el-carousel__item")]),a("span",{attrs:{class:"hljs-selector-pseudo"}},[t._v(":nth-child(2n)")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[t._v("background-color")]),t._v(": "),a("span",{attrs:{class:"hljs-number"}},[t._v("#99a9bf")]),t._v(";\n }\n\n "),a("span",{attrs:{class:"hljs-selector-class"}},[t._v(".el-carousel__item")]),a("span",{attrs:{class:"hljs-selector-pseudo"}},[t._v(":nth-child(2n+1)")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[t._v("background-color")]),t._v(": "),a("span",{attrs:{class:"hljs-number"}},[t._v("#d3dce6")]),t._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("style")]),t._v(">")]),t._v("\n")])])])]),t._m(3),a("p",[t._v("You can define when arrows are displayed")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-carousel :interval="5000" arrow="always">\n <el-carousel-item v-for="item in 4" :key="item">\n <h3>{{ item }}</h3>\n </el-carousel-item>\n </el-carousel>\n</template>\n\n\n',script:null,style:"\n .el-carousel__item h3 {\n color: #475669;\n font-size: 18px;\n opacity: 0.75;\n line-height: 300px;\n margin: 0;\n }\n\n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n\n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-carousel",{attrs:{interval:5e3,arrow:"always"}},t._l(4,function(s){return a("el-carousel-item",{key:s},[a("h3",[t._v(t._s(s))])])}))]],2),a("p",[t._v("The "),a("code",[t._v("arrow")]),t._v(" attribute determines when arrows are displayed. By default they appear when mouse hovers over the carousel. Setting "),a("code",[t._v("arrow")]),t._v(" to "),a("code",[t._v("always")]),t._v(" or "),a("code",[t._v("never")]),t._v(" shows/hides the arrows permanently.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-carousel")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":interval")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"5000"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("arrow")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"always"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-carousel-item")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-for")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item in 4"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":key")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("h3")]),t._v(">")]),t._v("{{ item }}"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("h3")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-carousel-item")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-carousel")]),t._v(">")]),t._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("style")]),t._v(">")]),a("span",{attrs:{class:"css"}},[t._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[t._v(".el-carousel__item")]),t._v(" "),a("span",{attrs:{class:"hljs-selector-tag"}},[t._v("h3")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[t._v("color")]),t._v(": "),a("span",{attrs:{class:"hljs-number"}},[t._v("#475669")]),t._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[t._v("font-size")]),t._v(": "),a("span",{attrs:{class:"hljs-number"}},[t._v("18px")]),t._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[t._v("opacity")]),t._v(": "),a("span",{attrs:{class:"hljs-number"}},[t._v("0.75")]),t._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[t._v("line-height")]),t._v(": "),a("span",{attrs:{class:"hljs-number"}},[t._v("300px")]),t._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[t._v("margin")]),t._v(": "),a("span",{attrs:{class:"hljs-number"}},[t._v("0")]),t._v(";\n }\n\n "),a("span",{attrs:{class:"hljs-selector-class"}},[t._v(".el-carousel__item")]),a("span",{attrs:{class:"hljs-selector-pseudo"}},[t._v(":nth-child(2n)")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[t._v("background-color")]),t._v(": "),a("span",{attrs:{class:"hljs-number"}},[t._v("#99a9bf")]),t._v(";\n }\n\n "),a("span",{attrs:{class:"hljs-selector-class"}},[t._v(".el-carousel__item")]),a("span",{attrs:{class:"hljs-selector-pseudo"}},[t._v(":nth-child(2n+1)")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[t._v("background-color")]),t._v(": "),a("span",{attrs:{class:"hljs-number"}},[t._v("#d3dce6")]),t._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("style")]),t._v(">")]),t._v("\n")])])])]),t._m(4),a("p",[t._v("When a page is wide enough but has limited height, you can activate card mode for carousels")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-carousel :interval="4000" type="card" height="200px">\n <el-carousel-item v-for="item in 6" :key="item">\n <h3>{{ item }}</h3>\n </el-carousel-item>\n </el-carousel>\n</template>\n\n\n',script:null,style:"\n .el-carousel__item h3 {\n color: #475669;\n font-size: 14px;\n opacity: 0.75;\n line-height: 200px;\n margin: 0;\n }\n\n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n\n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-carousel",{attrs:{interval:4e3,type:"card",height:"200px"}},t._l(6,function(s){return a("el-carousel-item",{key:s},[a("h3",[t._v(t._s(s))])])}))]],2),a("p",[t._v("Setting "),a("code",[t._v("type")]),t._v(" to "),a("code",[t._v("card")]),t._v(" activates the card mode. Apart from the appearance, the biggest difference between card mode and common mode is that clicking the slides at both sides directly switches the carousel in card mode.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-carousel")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":interval")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"4000"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("type")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"card"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("height")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"200px"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-carousel-item")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-for")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item in 6"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":key")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("h3")]),t._v(">")]),t._v("{{ item }}"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("h3")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-carousel-item")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-carousel")]),t._v(">")]),t._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("style")]),t._v(">")]),a("span",{attrs:{class:"css"}},[t._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[t._v(".el-carousel__item")]),t._v(" "),a("span",{attrs:{class:"hljs-selector-tag"}},[t._v("h3")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[t._v("color")]),t._v(": "),a("span",{attrs:{class:"hljs-number"}},[t._v("#475669")]),t._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[t._v("font-size")]),t._v(": "),a("span",{attrs:{class:"hljs-number"}},[t._v("14px")]),t._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[t._v("opacity")]),t._v(": "),a("span",{attrs:{class:"hljs-number"}},[t._v("0.75")]),t._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[t._v("line-height")]),t._v(": "),a("span",{attrs:{class:"hljs-number"}},[t._v("200px")]),t._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[t._v("margin")]),t._v(": "),a("span",{attrs:{class:"hljs-number"}},[t._v("0")]),t._v(";\n }\n\n "),a("span",{attrs:{class:"hljs-selector-class"}},[t._v(".el-carousel__item")]),a("span",{attrs:{class:"hljs-selector-pseudo"}},[t._v(":nth-child(2n)")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[t._v("background-color")]),t._v(": "),a("span",{attrs:{class:"hljs-number"}},[t._v("#99a9bf")]),t._v(";\n }\n\n "),a("span",{attrs:{class:"hljs-selector-class"}},[t._v(".el-carousel__item")]),a("span",{attrs:{class:"hljs-selector-pseudo"}},[t._v(":nth-child(2n+1)")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[t._v("background-color")]),t._v(": "),a("span",{attrs:{class:"hljs-number"}},[t._v("#d3dce6")]),t._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("style")]),t._v(">")]),t._v("\n")])])])]),t._m(5),t._m(6),t._m(7),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"carousel"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"basic-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"indicators"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#indicators","aria-hidden":"true"}},[this._v("¶")]),this._v(" Indicators")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"arrows"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#arrows","aria-hidden":"true"}},[this._v("¶")]),this._v(" Arrows")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"card-mode"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#card-mode","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card mode")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"carousel-attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#carousel-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("height")]),t("td",[s._v("height of the carousel")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("initial-index")]),t("td",[s._v("index of the initially active slide (starting from 0)")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("trigger")]),t("td",[s._v("how indicators are triggered")]),t("td",[s._v("string")]),t("td",[s._v("hover/click")]),t("td",[s._v("hover")])]),t("tr",[t("td",[s._v("autoplay")]),t("td",[s._v("whether automatically loop the slides")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("interval")]),t("td",[s._v("interval of the auto loop, in milliseconds")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("3000")])]),t("tr",[t("td",[s._v("indicator-position")]),t("td",[s._v("position of the indicators")]),t("td",[s._v("string")]),t("td",[s._v("outside/none")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("arrow")]),t("td",[s._v("when arrows are shown")]),t("td",[s._v("string")]),t("td",[s._v("always/hover/never")]),t("td",[s._v("hover")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("type of the Carousel")]),t("td",[s._v("string")]),t("td",[s._v("card")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"carousel-events"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#carousel-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel Events")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Event Name")]),t("th",[s._v("Description")]),t("th",[s._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("triggers when the active slide switches")]),t("td",[s._v("index of the new active slide, index of the old active slide")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"carousel-methods"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#carousel-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel Methods")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Method")]),t("th",[s._v("Description")]),t("th",[s._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[s._v("setActiveItem")]),t("td",[s._v("manually switch slide")]),t("td",[s._v("index of the slide to be switched to, starting from 0; or the "),t("code",{pre:!0},[s._v("name")]),s._v(" of corresponding "),t("code",{pre:!0},[s._v("el-carousel-item")])])]),t("tr",[t("td",[s._v("prev")]),t("td",[s._v("switch to the previous slide")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("next")]),t("td",[s._v("switch to the next slide")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"carousel-item-attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#carousel-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel-Item Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("name")]),t("td",[s._v("name of the item, can be used in "),t("code",{pre:!0},[s._v("setActiveItem")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("label")]),t("td",[s._v("text content for the corresponding indicator")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])}],!1,null,null,null);t.default=a.exports},849:function(s,t,a){"use strict";a.r(t);var l={data:function(){return{options2:[{label:"California",cities:[]},{label:"Florida",cities:[]}],props:{value:"label",children:"cities"},options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}],optionsWithDisabled:[],selectedOptions:[],selectedOptions2:[],selectedOptions3:["component","data","tag"]}},created:function(){this.optionsWithDisabled=JSON.parse(JSON.stringify(this.options)),this.optionsWithDisabled[0].disabled=!0},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source");s[0].style.padding="0",s[s.length-1].style.padding="0"})},methods:{handleItemChange:function(s){var t=this;console.log("active item:",s),setTimeout(function(){-1<s.indexOf("California")&&!t.options2[0].cities.length?t.options2[0].cities=[{label:"Los Angeles"}]:-1<s.indexOf("Florida")&&!t.options2[1].cities.length&&(t.options2[1].cities=[{label:"Orlando"}])},300)},handleChange:function(s){console.log(s)}}},a=(a(727),a(0)),a=Object(a.a)(l,function(){var t=this,s=t.$createElement,s=t._self._c||s;return s("section",[t._m(0),s("p",[t._v("If the options have a clear hierarchical structure, Cascader can be used to view and select them.")]),t._m(1),s("p",[t._v("There are two ways to expand child option items.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n <span class="demonstration">Child options expand when clicked (default)</span>\n <el-cascader :options="options" v-model="selectedOptions" @change="handleChange">\n </el-cascader>\n</div>\n<div class="block">\n <span class="demonstration">Child options expand when hovered</span>\n <el-cascader expand-trigger="hover" :options="options" v-model="selectedOptions2" @change="handleChange">\n </el-cascader>\n</div>\n\n\n',script:"\n export default {\n data: function() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }],\n selectedOptions: [],\n selectedOptions2: []\n };\n },\n methods: {\n handleChange: function(value) {\n console.log(value);\n }\n }\n };\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("div",{staticClass:"block"},[s("span",{staticClass:"demonstration"},[t._v("Child options expand when clicked (default)")]),s("el-cascader",{attrs:{options:t.options},on:{change:t.handleChange},model:{value:t.selectedOptions,callback:function(s){t.selectedOptions=s},expression:"selectedOptions"}})],1),s("div",{staticClass:"block"},[s("span",{staticClass:"demonstration"},[t._v("Child options expand when hovered")]),s("el-cascader",{attrs:{"expand-trigger":"hover",options:t.options},on:{change:t.handleChange},model:{value:t.selectedOptions2,callback:function(s){t.selectedOptions2=s},expression:"selectedOptions2"}})],1)]),s("p",[t._v("Assigning the "),s("code",[t._v("options")]),t._v(" attribute to an array of options renders a Cascader. The "),s("code",[t._v("expand-trigger")]),t._v(" attribute defines how child options are expanded. This example also demonstrates the "),s("code",[t._v("change")]),t._v(" event, whose parameter is the value of Cascader, an array made up of the values of each selected level.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"demonstration"')]),t._v(">")]),t._v("Child options expand when clicked (default)"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-cascader")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":options")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"options"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"selectedOptions"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@change")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleChange"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-cascader")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"demonstration"')]),t._v(">")]),t._v("Child options expand when hovered"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-cascader")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("expand-trigger")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"hover"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":options")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"options"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"selectedOptions2"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@change")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleChange"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-cascader")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("options")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'guide'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Guide'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'disciplines'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Disciplines'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'consistency'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Consistency'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'feedback'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Feedback'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'efficiency'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Efficiency'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'controllability'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Controllability'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'navigation'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Navigation'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'side nav'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Side Navigation'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'top nav'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Top Navigation'")]),t._v("\n }]\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'component'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Component'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'basic'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Basic'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'layout'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Layout'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'color'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Color'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'typography'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Typography'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'icon'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Icon'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'button'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Button'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'form'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Form'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'radio'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Radio'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'checkbox'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Checkbox'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'input'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Input'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'input-number'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'InputNumber'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'select'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Select'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'cascader'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Cascader'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'switch'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Switch'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'slider'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Slider'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'time-picker'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'TimePicker'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'date-picker'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'DatePicker'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'datetime-picker'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'DateTimePicker'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'upload'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Upload'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'rate'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Rate'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'form'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Form'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'data'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Data'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'table'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Table'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'tag'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Tag'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'progress'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Progress'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'tree'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Tree'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'pagination'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Pagination'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'badge'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Badge'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'notice'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Notice'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'alert'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Alert'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'loading'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Loading'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'message'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Message'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'message-box'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'MessageBox'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'notification'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Notification'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'navigation'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Navigation'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'menu'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'NavMenu'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'tabs'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Tabs'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'breadcrumb'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Breadcrumb'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'dropdown'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Dropdown'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'steps'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Steps'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'others'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Others'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'dialog'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Dialog'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'tooltip'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Tooltip'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'popover'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Popover'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'card'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Card'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'carousel'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Carousel'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'collapse'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Collapse'")]),t._v("\n }]\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'resource'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Resource'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'axure'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Axure Components'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'sketch'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Sketch Templates'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'docs'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Design Documentation'")]),t._v("\n }]\n }],\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("selectedOptions")]),t._v(": [],\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("selectedOptions2")]),t._v(": []\n };\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("methods")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("handleChange")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("value")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("console")]),t._v(".log(value);\n }\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(2),t._m(3),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-cascader :options="optionsWithDisabled"></el-cascader>\n\n',script:"\n export default {\n data: function() {\n return {\n optionsWithDisabled: [{\n value: 'guide',\n label: 'Guide',\n disabled: true,\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }]\n };\n }\n };\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-cascader",{attrs:{options:t.optionsWithDisabled}})],1),s("p",[t._v("In this example, the first item in "),s("code",[t._v("options")]),t._v(" array has a "),s("code",[t._v("disabled: true")]),t._v(" field, so it is disabled. By default, Cascader checks the "),s("code",[t._v("disabled")]),t._v(" field in each option object; if you are using another field name to indicate whether an option is disabled, you can assign it in the "),s("code",[t._v("props")]),t._v(" attribute (see the API table below for details). And of course, field name "),s("code",[t._v("value")]),t._v(", "),s("code",[t._v("label")]),t._v(" and "),s("code",[t._v("children")]),t._v(" can also be customized in the same way.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-cascader")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":options")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"optionsWithDisabled"')]),t._v("\n>")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-cascader")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("optionsWithDisabled")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'guide'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Guide'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("disabled")]),t._v(": "),s("span",{attrs:{class:"hljs-literal"}},[t._v("true")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'disciplines'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Disciplines'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'consistency'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Consistency'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'feedback'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Feedback'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'efficiency'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Efficiency'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'controllability'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Controllability'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'navigation'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Navigation'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'side nav'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Side Navigation'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'top nav'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Top Navigation'")]),t._v("\n }]\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'component'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Component'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'basic'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Basic'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'layout'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Layout'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'color'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Color'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'typography'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Typography'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'icon'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Icon'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'button'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Button'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'form'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Form'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'radio'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Radio'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'checkbox'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Checkbox'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'input'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Input'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'input-number'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'InputNumber'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'select'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Select'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'cascader'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Cascader'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'switch'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Switch'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'slider'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Slider'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'time-picker'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'TimePicker'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'date-picker'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'DatePicker'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'datetime-picker'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'DateTimePicker'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'upload'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Upload'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'rate'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Rate'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'form'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Form'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'data'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Data'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'table'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Table'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'tag'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Tag'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'progress'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Progress'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'tree'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Tree'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'pagination'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Pagination'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'badge'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Badge'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'notice'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Notice'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'alert'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Alert'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'loading'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Loading'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'message'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Message'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'message-box'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'MessageBox'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'notification'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Notification'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'navigation'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Navigation'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'menu'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'NavMenu'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'tabs'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Tabs'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'breadcrumb'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Breadcrumb'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'dropdown'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Dropdown'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'steps'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Steps'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'others'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Others'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'dialog'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Dialog'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'tooltip'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Tooltip'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'popover'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Popover'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'card'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Card'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'carousel'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Carousel'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'collapse'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Collapse'")]),t._v("\n }]\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'resource'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Resource'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'axure'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Axure Components'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'sketch'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Sketch Templates'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'docs'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Design Documentation'")]),t._v("\n }]\n }]\n };\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(4),s("p",[t._v("The input can display only the last level instead of all levels.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-cascader :options="options" :show-all-levels="false"></el-cascader>\n\n',script:"\n export default {\n data: function() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }]\n };\n }\n };\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-cascader",{attrs:{options:t.options,"show-all-levels":!1}})],1),s("p",[t._v("The "),s("code",[t._v("show-all-levels")]),t._v(" attribute defines if all levels are displayed. If it is "),s("code",[t._v("false")]),t._v(", only the last level is displayed.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-cascader")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":options")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"options"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":show-all-levels")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"false"')]),t._v("\n>")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-cascader")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("options")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'guide'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Guide'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'disciplines'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Disciplines'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'consistency'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Consistency'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'feedback'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Feedback'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'efficiency'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Efficiency'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'controllability'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Controllability'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'navigation'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Navigation'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'side nav'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Side Navigation'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'top nav'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Top Navigation'")]),t._v("\n }]\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'component'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Component'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'basic'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Basic'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'layout'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Layout'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'color'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Color'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'typography'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Typography'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'icon'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Icon'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'button'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Button'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'form'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Form'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'radio'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Radio'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'checkbox'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Checkbox'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'input'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Input'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'input-number'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'InputNumber'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'select'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Select'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'cascader'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Cascader'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'switch'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Switch'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'slider'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Slider'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'time-picker'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'TimePicker'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'date-picker'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'DatePicker'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'datetime-picker'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'DateTimePicker'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'upload'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Upload'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'rate'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Rate'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'form'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Form'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'data'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Data'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'table'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Table'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'tag'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Tag'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'progress'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Progress'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'tree'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Tree'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'pagination'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Pagination'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'badge'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Badge'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'notice'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Notice'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'alert'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Alert'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'loading'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Loading'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'message'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Message'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'message-box'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'MessageBox'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'notification'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Notification'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'navigation'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Navigation'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'menu'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'NavMenu'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'tabs'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Tabs'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'breadcrumb'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Breadcrumb'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'dropdown'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Dropdown'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'steps'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Steps'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'others'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Others'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'dialog'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Dialog'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'tooltip'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Tooltip'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'popover'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Popover'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'card'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Card'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'carousel'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Carousel'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'collapse'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Collapse'")]),t._v("\n }]\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'resource'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Resource'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'axure'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Axure Components'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'sketch'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Sketch Templates'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'docs'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Design Documentation'")]),t._v("\n }]\n }]\n };\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(5),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-cascader :options="options" v-model="selectedOptions3"></el-cascader>\n\n',script:"\n export default {\n data: function() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }],\n selectedOptions3: ['component', 'data', 'tag']\n };\n }\n };\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-cascader",{attrs:{options:t.options},model:{value:t.selectedOptions3,callback:function(s){t.selectedOptions3=s},expression:"selectedOptions3"}})],1),s("p",[t._v("The default value can be defined with an array.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-cascader")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":options")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"options"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"selectedOptions3"')]),t._v("\n>")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-cascader")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("options")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'guide'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Guide'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'disciplines'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Disciplines'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'consistency'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Consistency'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'feedback'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Feedback'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'efficiency'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Efficiency'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'controllability'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Controllability'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'navigation'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Navigation'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'side nav'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Side Navigation'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'top nav'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Top Navigation'")]),t._v("\n }]\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'component'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Component'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'basic'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Basic'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'layout'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Layout'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'color'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Color'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'typography'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Typography'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'icon'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Icon'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'button'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Button'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'form'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Form'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'radio'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Radio'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'checkbox'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Checkbox'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'input'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Input'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'input-number'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'InputNumber'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'select'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Select'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'cascader'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Cascader'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'switch'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Switch'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'slider'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Slider'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'time-picker'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'TimePicker'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'date-picker'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'DatePicker'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'datetime-picker'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'DateTimePicker'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'upload'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Upload'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'rate'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Rate'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'form'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Form'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'data'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Data'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'table'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Table'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'tag'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Tag'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'progress'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Progress'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'tree'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Tree'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'pagination'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Pagination'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'badge'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Badge'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'notice'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Notice'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'alert'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Alert'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'loading'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Loading'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'message'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Message'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'message-box'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'MessageBox'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'notification'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Notification'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'navigation'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Navigation'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'menu'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'NavMenu'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'tabs'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Tabs'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'breadcrumb'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Breadcrumb'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'dropdown'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Dropdown'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'steps'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Steps'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'others'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Others'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'dialog'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Dialog'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'tooltip'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Tooltip'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'popover'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Popover'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'card'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Card'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'carousel'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Carousel'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'collapse'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Collapse'")]),t._v("\n }]\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'resource'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Resource'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'axure'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Axure Components'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'sketch'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Sketch Templates'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'docs'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Design Documentation'")]),t._v("\n }]\n }],\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("selectedOptions3")]),t._v(": ["),s("span",{attrs:{class:"hljs-string"}},[t._v("'component'")]),t._v(", "),s("span",{attrs:{class:"hljs-string"}},[t._v("'data'")]),t._v(", "),s("span",{attrs:{class:"hljs-string"}},[t._v("'tag'")]),t._v("]\n };\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(6),s("p",[t._v("Parent options can also be selected.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-cascader :options="options" change-on-select></el-cascader>\n\n',script:"\n export default {\n data: function() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }]\n };\n }\n };\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-cascader",{attrs:{options:t.options,"change-on-select":""}})],1),s("p",[t._v("By default only the options in the last level can be selected. By assigning "),s("code",[t._v("change-on-select")]),t._v(" to "),s("code",[t._v("true")]),t._v(", options in parent levels can also be selected.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-cascader")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":options")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"options"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("change-on-select")]),t._v("\n>")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-cascader")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("options")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'guide'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Guide'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'disciplines'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Disciplines'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'consistency'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Consistency'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'feedback'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Feedback'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'efficiency'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Efficiency'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'controllability'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Controllability'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'navigation'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Navigation'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'side nav'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Side Navigation'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'top nav'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Top Navigation'")]),t._v("\n }]\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'component'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Component'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'basic'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Basic'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'layout'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Layout'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'color'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Color'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'typography'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Typography'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'icon'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Icon'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'button'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Button'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'form'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Form'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'radio'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Radio'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'checkbox'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Checkbox'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'input'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Input'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'input-number'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'InputNumber'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'select'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Select'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'cascader'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Cascader'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'switch'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Switch'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'slider'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Slider'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'time-picker'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'TimePicker'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'date-picker'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'DatePicker'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'datetime-picker'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'DateTimePicker'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'upload'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Upload'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'rate'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Rate'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'form'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Form'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'data'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Data'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'table'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Table'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'tag'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Tag'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'progress'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Progress'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'tree'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Tree'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'pagination'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Pagination'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'badge'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Badge'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'notice'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Notice'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'alert'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Alert'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'loading'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Loading'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'message'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Message'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'message-box'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'MessageBox'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'notification'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Notification'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'navigation'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Navigation'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'menu'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'NavMenu'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'tabs'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Tabs'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'breadcrumb'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Breadcrumb'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'dropdown'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Dropdown'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'steps'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Steps'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'others'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Others'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'dialog'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Dialog'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'tooltip'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Tooltip'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'popover'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Popover'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'card'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Card'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'carousel'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Carousel'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'collapse'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Collapse'")]),t._v("\n }]\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'resource'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Resource'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'axure'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Axure Components'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'sketch'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Sketch Templates'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'docs'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Design Documentation'")]),t._v("\n }]\n }]\n };\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(7),s("p",[t._v("Load child options when their parent option is clicked or hovered over.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-cascader :options="options2" @active-item-change="handleItemChange" :props="props"></el-cascader>\n\n\n',script:"\n export default {\n data: function() {\n return {\n options2: [{\n label: 'California',\n cities: []\n }, {\n label: 'Florida',\n cities: []\n }],\n props: {\n value: 'label',\n children: 'cities'\n }\n };\n },\n\n methods: {\n handleItemChange: function(val) {\n var _this = this;\n console.log('active item:', val);\n setTimeout(function() {\n if (val.indexOf('California') > -1 && !_this.options2[0].cities.length) {\n _this.options2[0].cities = [{\n label: 'Los Angeles'\n }];\n } else if (val.indexOf('Florida') > -1 && !_this.options2[1].cities.length) {\n _this.options2[1].cities = [{\n label: 'Orlando'\n }];\n }\n }, 300);\n }\n }\n };\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-cascader",{attrs:{options:t.options2,props:t.props},on:{"active-item-change":t.handleItemChange}})],1),s("p",[t._v("In this example, the options array does not have data of cities when initialized. With the "),s("code",[t._v("active-item-change")]),t._v(" event, you can load the cities of a specific state dynamically. Besides, this example also demonstrates how "),s("code",[t._v("props")]),t._v(" is used.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-cascader")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":options")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"options2"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@active-item-change")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleItemChange"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":props")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"props"')]),t._v("\n>")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-cascader")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("options2")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'California'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("cities")]),t._v(": []\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Florida'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("cities")]),t._v(": []\n }],\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("props")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'label'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'cities'")]),t._v("\n }\n };\n },\n\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("methods")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("handleItemChange")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("val")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" _this = "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(";\n "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("console")]),t._v(".log("),s("span",{attrs:{class:"hljs-string"}},[t._v("'active item:'")]),t._v(", val);\n setTimeout("),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("if")]),t._v(" (val.indexOf("),s("span",{attrs:{class:"hljs-string"}},[t._v("'California'")]),t._v(") > "),s("span",{attrs:{class:"hljs-number"}},[t._v("-1")]),t._v(" && !_this.options2["),s("span",{attrs:{class:"hljs-number"}},[t._v("0")]),t._v("].cities.length) {\n _this.options2["),s("span",{attrs:{class:"hljs-number"}},[t._v("0")]),t._v("].cities = [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Los Angeles'")]),t._v("\n }];\n } "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("else")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("if")]),t._v(" (val.indexOf("),s("span",{attrs:{class:"hljs-string"}},[t._v("'Florida'")]),t._v(") > "),s("span",{attrs:{class:"hljs-number"}},[t._v("-1")]),t._v(" && !_this.options2["),s("span",{attrs:{class:"hljs-number"}},[t._v("1")]),t._v("].cities.length) {\n _this.options2["),s("span",{attrs:{class:"hljs-number"}},[t._v("1")]),t._v("].cities = [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Orlando'")]),t._v("\n }];\n }\n }, "),s("span",{attrs:{class:"hljs-number"}},[t._v("300")]),t._v(");\n }\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(8),s("p",[t._v("Search and select options with a keyword.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n <span class="demonstration">Only options of the last level can be selected</span>\n <el-cascader placeholder="Try searching: Guide" :options="options" filterable></el-cascader>\n</div>\n<div class="block">\n <span class="demonstration">Options of all levels can be selected</span>\n <el-cascader placeholder="Try searching: Guide" :options="options" filterable change-on-select></el-cascader>\n</div>\n\n\n',script:"\n export default {\n data: function() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }]\n };\n }\n };\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("div",{staticClass:"block"},[s("span",{staticClass:"demonstration"},[t._v("Only options of the last level can be selected")]),s("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:t.options,filterable:""}})],1),s("div",{staticClass:"block"},[s("span",{staticClass:"demonstration"},[t._v("Options of all levels can be selected")]),s("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:t.options,filterable:"","change-on-select":""}})],1)]),s("p",[t._v("Adding "),s("code",[t._v("filterable")]),t._v(" to "),s("code",[t._v("el-cascader")]),t._v(" enables filtering")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"demonstration"')]),t._v(">")]),t._v("Only options of the last level can be selected"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-cascader")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Try searching: Guide"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":options")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"options"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("filterable")]),t._v("\n >")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-cascader")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"demonstration"')]),t._v(">")]),t._v("Options of all levels can be selected"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-cascader")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Try searching: Guide"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":options")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"options"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("filterable")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("change-on-select")]),t._v("\n >")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-cascader")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("options")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'guide'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Guide'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'disciplines'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Disciplines'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'consistency'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Consistency'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'feedback'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Feedback'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'efficiency'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Efficiency'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'controllability'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Controllability'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'navigation'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Navigation'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'side nav'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Side Navigation'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'top nav'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Top Navigation'")]),t._v("\n }]\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'component'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Component'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'basic'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Basic'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'layout'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Layout'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'color'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Color'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'typography'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Typography'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'icon'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Icon'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'button'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Button'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'form'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Form'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'radio'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Radio'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'checkbox'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Checkbox'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'input'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Input'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'input-number'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'InputNumber'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'select'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Select'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'cascader'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Cascader'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'switch'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Switch'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'slider'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Slider'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'time-picker'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'TimePicker'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'date-picker'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'DatePicker'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'datetime-picker'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'DateTimePicker'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'upload'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Upload'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'rate'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Rate'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'form'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Form'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'data'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Data'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'table'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Table'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'tag'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Tag'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'progress'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Progress'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'tree'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Tree'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'pagination'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Pagination'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'badge'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Badge'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'notice'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Notice'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'alert'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Alert'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'loading'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Loading'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'message'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Message'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'message-box'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'MessageBox'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'notification'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Notification'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'navigation'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Navigation'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'menu'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'NavMenu'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'tabs'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Tabs'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'breadcrumb'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Breadcrumb'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'dropdown'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Dropdown'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'steps'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Steps'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'others'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Others'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'dialog'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Dialog'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'tooltip'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Tooltip'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'popover'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Popover'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'card'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Card'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'carousel'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Carousel'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'collapse'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Collapse'")]),t._v("\n }]\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'resource'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Resource'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'axure'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Axure Components'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'sketch'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Sketch Templates'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'docs'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Design Documentation'")]),t._v("\n }]\n }]\n };\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(9),t._m(10),t._m(11),t._m(12),t._m(13),t._m(14)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"cascader"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#cascader","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cascader")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"basic-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"disabled-option"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#disabled-option","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled option")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[s._v("Disable an option by setting a "),t("code",{pre:!0},[s._v("disabled")]),s._v(" field in the option object.")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"display-only-the-last-level"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#display-only-the-last-level","aria-hidden":"true"}},[this._v("¶")]),this._v(" Display only the last level")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"with-default-value"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#with-default-value","aria-hidden":"true"}},[this._v("¶")]),this._v(" With default value")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"change-on-select"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#change-on-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Change on select")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"dynamically-load-child-options"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#dynamically-load-child-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dynamically load child options")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"filterable"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#filterable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filterable")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Options")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("options")]),t("td",[s._v("data of the options")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("props")]),t("td",[s._v("configuration options, see the following table")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("value")]),t("td",[s._v("selected value")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("popper-class")]),t("td",[s._v("custom class name for Cascader's dropdown")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("placeholder")]),t("td",[s._v("input placeholder")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("Select")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("whether Cascader is disabled")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("clearable")]),t("td",[s._v("whether selected value can be cleared")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("expand-trigger")]),t("td",[s._v("trigger mode of expanding current item")]),t("td",[s._v("string")]),t("td",[s._v("click / hover")]),t("td",[s._v("click")])]),t("tr",[t("td",[s._v("show-all-levels")]),t("td",[s._v("whether to display all levels of the selected value in the input")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("filterable")]),t("td",[s._v("whether the options can be searched")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("debounce")]),t("td",[s._v("debounce delay when typing filter keyword, in millisecond")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("300")])]),t("tr",[t("td",[s._v("change-on-select")]),t("td",[s._v("whether selecting an option of any level is permitted")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("size of Input")]),t("td",[s._v("string")]),t("td",[s._v("large / small / mini")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"props"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._v(" props")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("label")]),t("td",[s._v("specify which key of option object is used as the option's label")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("value")]),t("td",[s._v("specify which key of option object is used as the option's value")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("children")]),t("td",[s._v("specify which key of option object is used as the option's child options")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("specify which key of option object indicates if the option is disabled")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("before-filter")]),t("td",[s._v("hook function before filtering with the value to be filtered as its parameter. If "),t("code",{pre:!0},[s._v("false")]),s._v(" is returned or a "),t("code",{pre:!0},[s._v("Promise")]),s._v(" is returned and then is rejected, filtering will be aborted")]),t("td",[s._v("function(value)")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"events"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Event Name")]),t("th",[s._v("Description")]),t("th",[s._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("triggers when the binding value changes")]),t("td",[s._v("value")])]),t("tr",[t("td",[s._v("active-item-change")]),t("td",[s._v("triggers when active option changes, only works when "),t("code",{pre:!0},[s._v("change-on-select")]),s._v(" is "),t("code",{pre:!0},[s._v("false")])]),t("td",[s._v("an array of active options")])])])])}],!1,null,null,null);t.default=a.exports},850:function(s,t,a){"use strict";a.r(t);var l={data:function(){return{activeNames:["1"],activeName:"1"}},methods:{handleChange:function(s){console.log(s)}}},a=(a(729),a(0)),a=Object(a.a)(l,function(){var t=this,s=t.$createElement,s=t._self._c||s;return s("section",[t._m(0),s("p",[t._v("Use Collapse to store contents.")]),t._m(1),s("p",[t._v("You can expand multiple panels")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-collapse v-model="activeNames" @change="handleChange">\n <el-collapse-item title="Consistency" name="1">\n <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>\n <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n </el-collapse-item>\n <el-collapse-item title="Feedback" name="2">\n <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n </el-collapse-item>\n <el-collapse-item title="Efficiency" name="3">\n <div>Simplify the process: keep operating process simple and intuitive;</div>\n <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n </el-collapse-item>\n <el-collapse-item title="Controllability" name="4">\n <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n </el-collapse-item>\n</el-collapse>\n\n',script:"\n export default {\n data: function() {\n return {\n activeNames: ['1']\n };\n }\n }\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-collapse",{on:{change:t.handleChange},model:{value:t.activeNames,callback:function(s){t.activeNames=s},expression:"activeNames"}},[s("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[s("div",[t._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),s("div",[t._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),s("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[s("div",[t._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),s("div",[t._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),s("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[s("div",[t._v("Simplify the process: keep operating process simple and intuitive;")]),s("div",[t._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),s("div",[t._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),s("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[s("div",[t._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),s("div",[t._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-collapse")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"activeNames"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@change")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleChange"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-collapse-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("title")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Consistency"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"1"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-collapse-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-collapse-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("title")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Feedback"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"2"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("Visual feedback: reflect current state by updating or rearranging elements of the page."),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-collapse-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-collapse-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("title")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Efficiency"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"3"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("Simplify the process: keep operating process simple and intuitive;"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling."),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-collapse-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-collapse-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("title")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Controllability"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"4"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation."),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-collapse-item")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-collapse")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("activeNames")]),t._v(": ["),s("span",{attrs:{class:"hljs-string"}},[t._v("'1'")]),t._v("]\n };\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(2),s("p",[t._v("In accordion mode, only one panel can be expanded at once")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-collapse v-model="activeName" accordion>\n <el-collapse-item title="Consistency" name="1">\n <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>\n <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n </el-collapse-item>\n <el-collapse-item title="Feedback" name="2">\n <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n </el-collapse-item>\n <el-collapse-item title="Efficiency" name="3">\n <div>Simplify the process: keep operating process simple and intuitive;</div>\n <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n </el-collapse-item>\n <el-collapse-item title="Controllability" name="4">\n <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n </el-collapse-item>\n</el-collapse>\n\n',script:"\n export default {\n data: function() {\n return {\n activeName: '1'\n };\n }\n }\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-collapse",{attrs:{accordion:""},model:{value:t.activeName,callback:function(s){t.activeName=s},expression:"activeName"}},[s("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[s("div",[t._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),s("div",[t._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),s("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[s("div",[t._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),s("div",[t._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),s("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[s("div",[t._v("Simplify the process: keep operating process simple and intuitive;")]),s("div",[t._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),s("div",[t._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),s("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[s("div",[t._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),s("div",[t._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1),s("p",[t._v("Activate accordion mode using the "),s("code",[t._v("accordion")]),t._v(" attribute.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-collapse")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"activeName"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("accordion")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-collapse-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("title")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Consistency"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"1"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-collapse-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-collapse-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("title")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Feedback"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"2"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("Visual feedback: reflect current state by updating or rearranging elements of the page."),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-collapse-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-collapse-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("title")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Efficiency"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"3"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("Simplify the process: keep operating process simple and intuitive;"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling."),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-collapse-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-collapse-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("title")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Controllability"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"4"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation."),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-collapse-item")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-collapse")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("activeName")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'1'")]),t._v("\n };\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(3),t._m(4),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-collapse accordion>\n <el-collapse-item name="1">\n <template slot="title">\n Consistency<i class="header-icon el-icon-information"></i>\n </template>\n <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>\n <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n </el-collapse-item>\n <el-collapse-item title="Feedback" name="2">\n <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n </el-collapse-item>\n <el-collapse-item title="Efficiency" name="3">\n <div>Simplify the process: keep operating process simple and intuitive;</div>\n <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n </el-collapse-item>\n <el-collapse-item title="Controllability" name="4">\n <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n </el-collapse-item>\n</el-collapse>\n',script:null,style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-collapse",{attrs:{accordion:""}},[s("el-collapse-item",{attrs:{name:"1"}},[s("template",{slot:"title"},[t._v("\n Consistency"),s("i",{staticClass:"header-icon el-icon-information"})]),s("div",[t._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),s("div",[t._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])],2),s("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[s("div",[t._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),s("div",[t._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),s("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[s("div",[t._v("Simplify the process: keep operating process simple and intuitive;")]),s("div",[t._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),s("div",[t._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),s("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[s("div",[t._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),s("div",[t._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-collapse")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("accordion")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-collapse-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"1"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("slot")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"title"')]),t._v(">")]),t._v("\n Consistency"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("i")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"header-icon el-icon-information"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("i")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-collapse-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-collapse-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("title")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Feedback"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"2"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("Visual feedback: reflect current state by updating or rearranging elements of the page."),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-collapse-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-collapse-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("title")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Efficiency"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"3"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("Simplify the process: keep operating process simple and intuitive;"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling."),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-collapse-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-collapse-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("title")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Controllability"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"4"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation."),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-collapse-item")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-collapse")]),t._v(">")]),t._v("\n")])])])]),t._m(5),t._m(6),t._m(7),t._m(8),t._m(9),t._m(10)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"collapse"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"basic-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"accordion"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#accordion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Accordion")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"custom-title"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#custom-title","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom title")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[s._v("Besides using the "),t("code",{pre:!0},[s._v("title")]),s._v(" attribute, you can customize panel title with named slots, which makes adding custom content, e.g. icons, possible.")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"collapse-attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#collapse-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("accordion")]),t("td",[s._v("whether to activate accordion mode")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("value")]),t("td",[s._v("currently active panel")]),t("td",[s._v("string (accordion mode)/array (non-accordion mode)")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"collapse-events"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#collapse-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse Events")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Event Name")]),t("th",[s._v("Description")]),t("th",[s._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("triggers when active panels change")]),t("td",[s._v("activeNames: array (non-accordion mode)/string (accordion mode)")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"collapse-item-attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#collapse-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse Item Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("name")]),t("td",[s._v("unique identification of the panel")]),t("td",[s._v("string/number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("title")]),t("td",[s._v("title of the panel")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])}],!1,null,null,null);t.default=a.exports},851:function(s,t,a){"use strict";a.r(t);var l={data:function(){return{color1:"#20a0ff",color2:null,color3:"rgba(19, 206, 102, 0.8)"}},mounted:function(){this.$nextTick(function(){document.querySelectorAll(".source")[0].style.padding="0"})}},a=(a(730),a(0)),a=Object(a.a)(l,function(){var t=this,s=t.$createElement,s=t._self._c||s;return s("section",[t._m(0),s("p",[t._v("ColorPicker is a color selector supporting multiple color formats.")]),t._m(1),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n <span class="demonstration">With default value</span>\n <el-color-picker v-model="color1"></el-color-picker>\n</div>\n<div class="block">\n <span class="demonstration">With no default value</span>\n <el-color-picker v-model="color2"></el-color-picker>\n</div>\n\n\n',script:"\n export default {\n data: function() {\n return {\n color1: '#20a0ff',\n color2: null\n }\n }\n };\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("div",{staticClass:"block"},[s("span",{staticClass:"demonstration"},[t._v("With default value")]),s("el-color-picker",{model:{value:t.color1,callback:function(s){t.color1=s},expression:"color1"}})],1),s("div",{staticClass:"block"},[s("span",{staticClass:"demonstration"},[t._v("With no default value")]),s("el-color-picker",{model:{value:t.color2,callback:function(s){t.color2=s},expression:"color2"}})],1)]),s("p",[t._v("ColorPicker requires a string typed variable to be bound to v-model.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"demonstration"')]),t._v(">")]),t._v("With default value"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-color-picker")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"color1"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-color-picker")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"demonstration"')]),t._v(">")]),t._v("With no default value"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-color-picker")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"color2"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-color-picker")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("color1")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'#20a0ff'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("color2")]),t._v(": "),s("span",{attrs:{class:"hljs-literal"}},[t._v("null")]),t._v("\n }\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(2),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-color-picker v-model="color3" show-alpha></el-color-picker>\n\n\n',script:"\n export default {\n data: function() {\n return {\n color3: 'rgba(19, 206, 102, 0.8)'\n }\n }\n };\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-color-picker",{attrs:{"show-alpha":""},model:{value:t.color3,callback:function(s){t.color3=s},expression:"color3"}})],1),s("p",[t._v("ColorPicker supports alpha channel selecting. To activate alpha selecting, just add the "),s("code",[t._v("show-alpha")]),t._v(" attribute.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-color-picker")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"color3"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("show-alpha")]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-color-picker")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("color3")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'rgba(19, 206, 102, 0.8)'")]),t._v("\n }\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(3),t._m(4),t._m(5),t._m(6)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"colorpicker"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" ColorPicker")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"basic-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"alpha"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#alpha","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alpha")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("show-alpha")]),t("td",[s._v("whether to display the alpha slider")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("color-format")]),t("td",[s._v("color format of v-model")]),t("td",[s._v("string")]),t("td",[s._v("hsl / hsv / hex / rgb")]),t("td",[s._v("hex (when show-alpha is false)/ rgb (when show-alpha is true)")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"events"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Event Name")]),t("th",[s._v("Description")]),t("th",[s._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("triggers when input value changes")]),t("td",[s._v("color value")])]),t("tr",[t("td",[s._v("active-change")]),t("td",[s._v("triggers when the current active color changes")]),t("td",[s._v("active color value")])])])])}],!1,null,null,null);t.default=a.exports},852:function(s,t,a){"use strict";a.r(t);var l={methods:{handleClick:function(){alert("button click")},handleCommand:function(s){this.$message("click on item "+s)}}},a=(a(738),a(0)),a=Object(a.a)(l,function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("section",[s._m(0),t("p",[s._v("Toggleable menu for displaying lists of links and actions.")]),s._m(1),t("p",[s._v("Hover on the dropdown menu to unfold it for more actions.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-dropdown>\n <span class="el-dropdown-link">\n Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>\n </span>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>Action 1</el-dropdown-item>\n <el-dropdown-item>Action 2</el-dropdown-item>\n <el-dropdown-item>Action 3</el-dropdown-item>\n <el-dropdown-item disabled>Action 4</el-dropdown-item>\n <el-dropdown-item divided>Action 5</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-dropdown",[t("span",{staticClass:"el-dropdown-link"},[s._v("\n Dropdown List"),t("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),t("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[t("el-dropdown-item",[s._v("Action 1")]),t("el-dropdown-item",[s._v("Action 2")]),t("el-dropdown-item",[s._v("Action 3")]),t("el-dropdown-item",{attrs:{disabled:""}},[s._v("Action 4")]),t("el-dropdown-item",{attrs:{divided:""}},[s._v("Action 5")])],1)],1)],1),t("p",[s._v("The triggering element is rendered by the default "),t("code",[s._v("slot")]),s._v(", and the dropdown part is rendered by the "),t("code",[s._v("slot")]),s._v(" named "),t("code",[s._v("dropdown")]),s._v(". By default, dropdown list shows when you hover on the triggering element without having to click it.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Dropdown List"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("divided")]),s._v(">")]),s._v("Action 5"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Use the button to trigger the dropdown list.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-dropdown>\n <el-button type="primary">\n Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>\n </el-button>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>Action 1</el-dropdown-item>\n <el-dropdown-item>Action 2</el-dropdown-item>\n <el-dropdown-item>Action 3</el-dropdown-item>\n <el-dropdown-item>Action 4</el-dropdown-item>\n <el-dropdown-item>Action 5</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n<el-dropdown split-button type="primary" @click="handleClick">\n Dropdown List\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>Action 1</el-dropdown-item>\n <el-dropdown-item>Action 2</el-dropdown-item>\n <el-dropdown-item>Action 3</el-dropdown-item>\n <el-dropdown-item>Action 4</el-dropdown-item>\n <el-dropdown-item>Action 5</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-dropdown",[t("el-button",{attrs:{type:"primary"}},[s._v("\n Dropdown List"),t("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),t("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[t("el-dropdown-item",[s._v("Action 1")]),t("el-dropdown-item",[s._v("Action 2")]),t("el-dropdown-item",[s._v("Action 3")]),t("el-dropdown-item",[s._v("Action 4")]),t("el-dropdown-item",[s._v("Action 5")])],1)],1),t("el-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:s.handleClick}},[s._v("\n Dropdown List\n "),t("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[t("el-dropdown-item",[s._v("Action 1")]),t("el-dropdown-item",[s._v("Action 2")]),t("el-dropdown-item",[s._v("Action 3")]),t("el-dropdown-item",[s._v("Action 4")]),t("el-dropdown-item",[s._v("Action 5")])],1)],1)],1),t("p",[s._v("Use "),t("code",[s._v("split-button")]),s._v(" to split the triggering element into a button group with the left button being a normal button and right one the actual triggering target. If you wanna insert a separator line between item three and item four, just add a class "),t("code",[s._v("divider")]),s._v(" to item four.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("\n Dropdown List"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("split-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleClick"')]),s._v(">")]),s._v("\n Dropdown List\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Click the triggering element or hover on it.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row class="block-col-2">\n <el-col :span="12">\n <span class="demonstration">hover to trigger</span>\n <el-dropdown>\n <span class="el-dropdown-link">\n Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>\n </span>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>Action 1</el-dropdown-item>\n <el-dropdown-item>Action 2</el-dropdown-item>\n <el-dropdown-item>Action 3</el-dropdown-item>\n <el-dropdown-item>Action 4</el-dropdown-item>\n <el-dropdown-item>Action 5</el-dropdown-item>\n </el-dropdown-menu>\n </el-dropdown>\n </el-col>\n <el-col :span="12">\n <span class="demonstration">click to trigger</span>\n <el-dropdown trigger="click">\n <span class="el-dropdown-link">\n Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>\n </span>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>Action 1</el-dropdown-item>\n <el-dropdown-item>Action 2</el-dropdown-item>\n <el-dropdown-item>Action 3</el-dropdown-item>\n <el-dropdown-item>Action 4</el-dropdown-item>\n <el-dropdown-item>Action 5</el-dropdown-item>\n </el-dropdown-menu>\n </el-dropdown>\n </el-col>\n</el-row>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-row",{staticClass:"block-col-2"},[t("el-col",{attrs:{span:12}},[t("span",{staticClass:"demonstration"},[s._v("hover to trigger")]),t("el-dropdown",[t("span",{staticClass:"el-dropdown-link"},[s._v("\n Dropdown List"),t("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),t("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[t("el-dropdown-item",[s._v("Action 1")]),t("el-dropdown-item",[s._v("Action 2")]),t("el-dropdown-item",[s._v("Action 3")]),t("el-dropdown-item",[s._v("Action 4")]),t("el-dropdown-item",[s._v("Action 5")])],1)],1)],1),t("el-col",{attrs:{span:12}},[t("span",{staticClass:"demonstration"},[s._v("click to trigger")]),t("el-dropdown",{attrs:{trigger:"click"}},[t("span",{staticClass:"el-dropdown-link"},[s._v("\n Dropdown List"),t("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),t("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[t("el-dropdown-item",[s._v("Action 1")]),t("el-dropdown-item",[s._v("Action 2")]),t("el-dropdown-item",[s._v("Action 3")]),t("el-dropdown-item",[s._v("Action 4")]),t("el-dropdown-item",[s._v("Action 5")])],1)],1)],1)],1)],1),t("p",[s._v("Use the attribute "),t("code",[s._v("trigger")]),s._v(". By default, it is "),t("code",[s._v("hover")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"block-col-2"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("hover to trigger"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Dropdown List"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("click to trigger"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"click"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Dropdown List"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-dropdown :hide-on-click="false">\n <span class="el-dropdown-link">\n Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>\n </span>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>Action 1</el-dropdown-item>\n <el-dropdown-item>Action 2</el-dropdown-item>\n <el-dropdown-item>Action 3</el-dropdown-item>\n <el-dropdown-item disabled>Action 4</el-dropdown-item>\n <el-dropdown-item divided>Action 5</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-dropdown",{attrs:{"hide-on-click":!1}},[t("span",{staticClass:"el-dropdown-link"},[s._v("\n Dropdown List"),t("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),t("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[t("el-dropdown-item",[s._v("Action 1")]),t("el-dropdown-item",[s._v("Action 2")]),t("el-dropdown-item",[s._v("Action 3")]),t("el-dropdown-item",{attrs:{disabled:""}},[s._v("Action 4")]),t("el-dropdown-item",{attrs:{divided:""}},[s._v("Action 5")])],1)],1)],1),t("p",[s._v("By default menu will close when you click on menu items, and it can be turned off by setting hide-on-click to false.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":hide-on-click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Dropdown List"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("divided")]),s._v(">")]),s._v("Action 5"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n")])])])]),s._m(6),t("p",[s._v("Clicking each dropdown item fires an event whose parameter is assigned by each item.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-dropdown @command="handleCommand">\n <span class="el-dropdown-link">\n Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>\n </span>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item command="a">Action 1</el-dropdown-item>\n <el-dropdown-item command="b">Action 2</el-dropdown-item>\n <el-dropdown-item command="c">Action 3</el-dropdown-item>\n <el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>\n <el-dropdown-item command="e" divided>Action 5</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n\n',script:"\n export default {\n methods: {\n handleCommand: function(command) {\n this.$message('click on item ' + command);\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-dropdown",{on:{command:s.handleCommand}},[t("span",{staticClass:"el-dropdown-link"},[s._v("\n Dropdown List"),t("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),t("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[t("el-dropdown-item",{attrs:{command:"a"}},[s._v("Action 1")]),t("el-dropdown-item",{attrs:{command:"b"}},[s._v("Action 2")]),t("el-dropdown-item",{attrs:{command:"c"}},[s._v("Action 3")]),t("el-dropdown-item",{attrs:{command:"d",disabled:""}},[s._v("Action 4")]),t("el-dropdown-item",{attrs:{command:"e",divided:""}},[s._v("Action 5")])],1)],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@command")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"handleCommand"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Dropdown List"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("command")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"a"')]),s._v(">")]),s._v("Action 1"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("command")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"b"')]),s._v(">")]),s._v("Action 2"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("command")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"c"')]),s._v(">")]),s._v("Action 3"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("command")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"d"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("command")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"e"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("divided")]),s._v(">")]),s._v("Action 5"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("handleCommand")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}},[s._v("command")]),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message("),t("span",{attrs:{class:"hljs-string"}},[s._v("'click on item '")]),s._v(" + command);\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"dropdown"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#dropdown","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"basic-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"triggering-element"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#triggering-element","aria-hidden":"true"}},[this._v("¶")]),this._v(" Triggering element")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"how-to-trigger"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#how-to-trigger","aria-hidden":"true"}},[this._v("¶")]),this._v(" How to trigger")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"menu-hiding-behavior"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#menu-hiding-behavior","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu hiding behavior")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[s._v("Use "),t("code",{pre:!0},[s._v("hide-on-click")]),s._v(" to define if menu closes on clicking.")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"command-event"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#command-event","aria-hidden":"true"}},[this._v("¶")]),this._v(" Command event")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"dropdown-attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("type")]),t("td",[s._v("menu button type, refer to "),t("code",{pre:!0},[s._v("Button")]),s._v(" Component, only works when "),t("code",{pre:!0},[s._v("split-button")]),s._v(" is true")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("menu button size, refer to "),t("code",{pre:!0},[s._v("Button")]),s._v(" Component, only works when "),t("code",{pre:!0},[s._v("split-button")]),s._v(" is true")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("split-button")]),t("td",[s._v("whether a button group is displayed")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("component size, refer to "),t("code",{pre:!0},[s._v("Button")]),s._v(" component")]),t("td",[s._v("string")]),t("td",[s._v("large, small, mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("menu-align")]),t("td",[s._v("horizontal alignment")]),t("td",[s._v("string")]),t("td",[s._v("start/end")]),t("td",[s._v("end")])]),t("tr",[t("td",[s._v("trigger")]),t("td",[s._v("how to trigger")]),t("td",[s._v("string")]),t("td",[s._v("hover/click")]),t("td",[s._v("hover")])]),t("tr",[t("td",[s._v("hide-on-click")]),t("td",[s._v("whether to hide menu after clicking menu-item")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("show-timeout")]),t("td",[s._v("Delay time before show a dropdown")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("250")])]),t("tr",[t("td",[s._v("hide-timeout")]),t("td",[s._v("Delay time before hide a dropdown")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("150")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"dropdown-events"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Events")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Event Name")]),t("th",[s._v("Description")]),t("th",[s._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[s._v("click")]),t("td",[s._v("if "),t("code",{pre:!0},[s._v("split-button")]),s._v(" is "),t("code",{pre:!0},[s._v("true")]),s._v(", triggers when left button is clicked")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("command")]),t("td",[s._v("triggers when a dropdown item is clicked")]),t("td",[s._v("the command dispatched from the dropdown item")])]),t("tr",[t("td",[s._v("visible-change")]),t("td",[s._v("triggers when the dropdown appears/disappears")]),t("td",[s._v("true when it appears, and false otherwise")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"dropdown-menu-item-attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-menu-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Menu Item Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("command")]),t("td",[s._v("a command to be dispatched to Dropdown's "),t("code",{pre:!0},[s._v("command")]),s._v(" callback")]),t("td",[s._v("string/number/object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("whether the item is disabled")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("divided")]),t("td",[s._v("whether a divider is displayed")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])}],!1,null,null,null);t.default=a.exports},853:function(s,t,a){"use strict";a.r(t);var l={data:function(){return{form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formInline:{user:"",region:""},labelPosition:"right",formLabelAlign:{name:"",region:"",type:""},ruleForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},ruleForm2:{pass:"",checkPass:"",age:""},formLabelWidth:"80px",options:[],rules:{name:[{required:!0,message:"Please input Activity name",trigger:"blur"},{min:3,max:5,message:"Length should be 3 to 5",trigger:"blur"}],region:[{required:!0,message:"Please select Activity zone",trigger:"change"}],date1:[{type:"date",required:!0,message:"Please pick a date",trigger:"change"}],date2:[{type:"date",required:!0,message:"Please pick a time",trigger:"change"}],type:[{type:"array",required:!0,message:"Please select at least one activity type",trigger:"change"}],resource:[{required:!0,message:"Please select activity resource",trigger:"change"}],desc:[{required:!0,message:"Please input activity form",trigger:"blur"}]},rules2:{pass:[{validator:function(s,t,a){""===t?a(new Error("Please input the password")):(""!==this.ruleForm2.checkPass&&this.$refs.ruleForm2.validateField("checkPass"),a())},trigger:"blur"}],checkPass:[{validator:function(s,t,a){""===t?a(new Error("Please input the password again")):t!==this.ruleForm2.pass?a(new Error("Two inputs don't match!")):a()},trigger:"blur"}],age:[{validator:function(s,t,a){if(!t)return a(new Error("Please input the age"));setTimeout(function(){Number.isInteger(t)?t<18?a(new Error("Age must be greater than 18")):a():a(new Error("Please input digits"))},1e3)},trigger:"blur"}]},dynamicValidateForm:{domains:[{key:Date.now(),value:""}],email:""},numberValidateForm:{age:""}}},methods:{onSubmit:function(){console.log("submit!")},onRuleFormSubmit:function(){console.log("onRuleFormSubmit")},submitForm:function(s){this.$refs[s].validate(function(s){if(!s)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(s){this.$refs[s].resetFields()},removeDomain:function(s){s=this.dynamicValidateForm.domains.indexOf(s);-1!==s&&this.dynamicValidateForm.domains.splice(s,1)},addDomain:function(){this.dynamicValidateForm.domains.push({key:Date.now(),value:""})}}},a=(a(739),a(0)),a=Object(a.a)(l,function(){var a=this,s=a.$createElement,l=a._self._c||s;return l("section",[a._m(0),a._m(1),a._m(2),a._m(3),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form ref="form" :model="form" label-width="120px">\n <el-form-item label="Activity name">\n <el-input v-model="form.name"></el-input>\n </el-form-item>\n <el-form-item label="Activity zone">\n <el-select v-model="form.region" placeholder="please select your zone">\n <el-option label="Zone one" value="shanghai"></el-option>\n <el-option label="Zone two" value="beijing"></el-option>\n </el-select>\n </el-form-item>\n <el-form-item label="Activity time">\n <el-col :span="11">\n <el-date-picker type="date" placeholder="Pick a date" v-model="form.date1" style="width: 100%;"></el-date-picker>\n </el-col>\n <el-col class="line" :span="2">-</el-col>\n <el-col :span="11">\n <el-time-picker type="fixed-time" placeholder="Pick a time" v-model="form.date2" style="width: 100%;"></el-time-picker>\n </el-col>\n </el-form-item>\n <el-form-item label="Instant delivery">\n <el-switch on-text off-text v-model="form.delivery"></el-switch>\n </el-form-item>\n <el-form-item label="Activity type">\n <el-checkbox-group v-model="form.type">\n <el-checkbox label="Online activities" name="type"></el-checkbox>\n <el-checkbox label="Promotion activities" name="type"></el-checkbox>\n <el-checkbox label="Offline activities" name="type"></el-checkbox>\n <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>\n </el-checkbox-group>\n </el-form-item>\n <el-form-item label="Resources">\n <el-radio-group v-model="form.resource">\n <el-radio label="Sponsor"></el-radio>\n <el-radio label="Venue"></el-radio>\n </el-radio-group>\n </el-form-item>\n <el-form-item label="Activity form">\n <el-input type="textarea" v-model="form.desc"></el-input>\n </el-form-item>\n <el-form-item>\n <el-button type="primary" @click="onSubmit">Create</el-button>\n <el-button>Cancel</el-button>\n </el-form-item>\n</el-form>\n\n',script:"\n export default {\n data: function() {\n return {\n form: {\n name: '',\n region: '',\n date1: '',\n date2: '',\n delivery: false,\n type: [],\n resource: '',\n desc: ''\n }\n }\n },\n methods: {\n onSubmit: function() {\n console.log('submit!');\n }\n }\n }\n",style:null}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[l("el-form",{ref:"form",attrs:{model:a.form,"label-width":"120px"}},[l("el-form-item",{attrs:{label:"Activity name"}},[l("el-input",{model:{value:a.form.name,callback:function(s){a.$set(a.form,"name",s)},expression:"form.name"}})],1),l("el-form-item",{attrs:{label:"Activity zone"}},[l("el-select",{attrs:{placeholder:"please select your zone"},model:{value:a.form.region,callback:function(s){a.$set(a.form,"region",s)},expression:"form.region"}},[l("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),l("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),l("el-form-item",{attrs:{label:"Activity time"}},[l("el-col",{attrs:{span:11}},[l("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:a.form.date1,callback:function(s){a.$set(a.form,"date1",s)},expression:"form.date1"}})],1),l("el-col",{staticClass:"line",attrs:{span:2}},[a._v("-")]),l("el-col",{attrs:{span:11}},[l("el-time-picker",{staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"Pick a time"},model:{value:a.form.date2,callback:function(s){a.$set(a.form,"date2",s)},expression:"form.date2"}})],1)],1),l("el-form-item",{attrs:{label:"Instant delivery"}},[l("el-switch",{attrs:{"on-text":"","off-text":""},model:{value:a.form.delivery,callback:function(s){a.$set(a.form,"delivery",s)},expression:"form.delivery"}})],1),l("el-form-item",{attrs:{label:"Activity type"}},[l("el-checkbox-group",{model:{value:a.form.type,callback:function(s){a.$set(a.form,"type",s)},expression:"form.type"}},[l("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),l("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),l("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),l("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),l("el-form-item",{attrs:{label:"Resources"}},[l("el-radio-group",{model:{value:a.form.resource,callback:function(s){a.$set(a.form,"resource",s)},expression:"form.resource"}},[l("el-radio",{attrs:{label:"Sponsor"}}),l("el-radio",{attrs:{label:"Venue"}})],1)],1),l("el-form-item",{attrs:{label:"Activity form"}},[l("el-input",{attrs:{type:"textarea"},model:{value:a.form.desc,callback:function(s){a.$set(a.form,"desc",s)},expression:"form.desc"}})],1),l("el-form-item",[l("el-button",{attrs:{type:"primary"},on:{click:a.onSubmit}},[a._v("Create")]),l("el-button",[a._v("Cancel")])],1)],1)],1),l("p",[a._v("In each "),l("code",[a._v("form")]),a._v(" component, you need a "),l("code",[a._v("form-item")]),a._v(" field to be the container of your input item.")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("ref")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"form"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"form"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label-width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"120px"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Activity name"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-input")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"form.name"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-input")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Activity zone"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-select")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"form.region"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("placeholder")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"please select your zone"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-option")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Zone one"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("value")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"shanghai"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-option")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-option")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Zone two"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("value")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"beijing"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-option")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-select")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Activity time"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-col")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":span")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"11"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-date-picker")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"date"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("placeholder")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Pick a date"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"form.date1"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("style")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"width: 100%;"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-date-picker")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-col")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-col")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("class")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"line"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":span")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"2"')]),a._v(">")]),a._v("-"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-col")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-col")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":span")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"11"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-time-picker")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"fixed-time"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("placeholder")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Pick a time"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"form.date2"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("style")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"width: 100%;"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-time-picker")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-col")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Instant delivery"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-switch")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("on-text")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('""')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("off-text")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('""')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"form.delivery"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-switch")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Activity type"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-checkbox-group")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"form.type"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-checkbox")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Online activities"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"type"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-checkbox")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-checkbox")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Promotion activities"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"type"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-checkbox")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-checkbox")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Offline activities"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"type"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-checkbox")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-checkbox")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Simple brand exposure"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"type"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-checkbox")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-checkbox-group")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Resources"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-radio-group")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"form.resource"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-radio")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Sponsor"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-radio")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-radio")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Venue"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-radio")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-radio-group")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Activity form"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-input")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"textarea"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"form.desc"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-input")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"primary"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("@click")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"onSubmit"')]),a._v(">")]),a._v("Create"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(">")]),a._v("Cancel"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),l("span",{attrs:{class:"javascript"}},[a._v("\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("export")]),a._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("default")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("data")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("form")]),a._v(": {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("''")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("region")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("''")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date1")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("''")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date2")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("''")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("delivery")]),a._v(": "),l("span",{attrs:{class:"hljs-literal"}},[a._v("false")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v(": [],\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("resource")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("''")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("desc")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("''")]),a._v("\n }\n }\n },\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("methods")]),a._v(": {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("onSubmit")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-built_in"}},[a._v("console")]),a._v(".log("),l("span",{attrs:{class:"hljs-string"}},[a._v("'submit!'")]),a._v(");\n }\n }\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),a._v("\n")])])])]),a._m(4),l("p",[a._v("When the vertical space is limited and the form is relatively simple, you can put it in one line.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :inline="true" :model="formInline" class="demo-form-inline">\n <el-form-item label="Approved by">\n <el-input v-model="formInline.user" placeholder="Approved by"></el-input>\n </el-form-item>\n <el-form-item label="Activity zone">\n <el-select v-model="formInline.region" placeholder="Activity zone">\n <el-option label="Zone one" value="shanghai"></el-option>\n <el-option label="Zone two" value="beijing"></el-option>\n </el-select>\n </el-form-item><el-form-item>\n <el-button type="primary" @click="onSubmit">Query</el-button>\n </el-form-item>\n</el-form>\n\n',script:"\n export default {\n data(): function {\n return {\n formInline: {\n user: '',\n region: ''\n }\n }\n },\n methods: {\n onSubmit: function() {\n console.log('submit!');\n }\n }\n }\n",style:null}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[l("el-form",{staticClass:"demo-form-inline",attrs:{inline:!0,model:a.formInline}},[l("el-form-item",{attrs:{label:"Approved by"}},[l("el-input",{attrs:{placeholder:"Approved by"},model:{value:a.formInline.user,callback:function(s){a.$set(a.formInline,"user",s)},expression:"formInline.user"}})],1),l("el-form-item",{attrs:{label:"Activity zone"}},[l("el-select",{attrs:{placeholder:"Activity zone"},model:{value:a.formInline.region,callback:function(s){a.$set(a.formInline,"region",s)},expression:"formInline.region"}},[l("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),l("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),l("el-form-item",[l("el-button",{attrs:{type:"primary"},on:{click:a.onSubmit}},[a._v("Query")])],1)],1)],1),l("p",[a._v("Set the "),l("code",[a._v("inline")]),a._v(" attribute to "),l("code",[a._v("true")]),a._v(" and the form will be inline.")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":inline")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"true"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"formInline"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("class")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"demo-form-inline"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Approved by"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-input")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"formInline.user"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("placeholder")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Approved by"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-input")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Activity zone"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-select")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"formInline.region"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("placeholder")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Activity zone"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-option")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Zone one"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("value")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"shanghai"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-option")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-option")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Zone two"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("value")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"beijing"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-option")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-select")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"primary"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("@click")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"onSubmit"')]),a._v(">")]),a._v("Query"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),l("span",{attrs:{class:"javascript"}},[a._v("\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("export")]),a._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("default")]),a._v(" {\n data(): "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v(" ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("formInline")]),a._v(": {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("user")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("''")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("region")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("''")]),a._v("\n }\n }\n },\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("methods")]),a._v(": {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("onSubmit")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-built_in"}},[a._v("console")]),a._v(".log("),l("span",{attrs:{class:"hljs-string"}},[a._v("'submit!'")]),a._v(");\n }\n }\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),a._v("\n")])])])]),a._m(5),l("p",[a._v("Depending on your design, there are several different ways to align your label element.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-radio-group v-model="labelPosition" size="small">\n <el-radio-button label="left">Left</el-radio-button>\n <el-radio-button label="right">Right</el-radio-button>\n <el-radio-button label="top">Top</el-radio-button>\n</el-radio-group>\n<div style="margin: 20px;"></div>\n<el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">\n <el-form-item label="Name">\n <el-input v-model="formLabelAlign.name"></el-input>\n </el-form-item>\n <el-form-item label="Activity zone">\n <el-input v-model="formLabelAlign.region"></el-input>\n </el-form-item>\n <el-form-item label="Activity form">\n <el-input v-model="formLabelAlign.type"></el-input>\n </el-form-item>\n</el-form>\n\n',script:"\n export default {\n data: function() {\n return {\n labelPosition: 'right',\n formLabelAlign: {\n name: '',\n region: '',\n type: ''\n }\n };\n }\n }\n",style:null}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[l("el-radio-group",{attrs:{size:"small"},model:{value:a.labelPosition,callback:function(s){a.labelPosition=s},expression:"labelPosition"}},[l("el-radio-button",{attrs:{label:"left"}},[a._v("Left")]),l("el-radio-button",{attrs:{label:"right"}},[a._v("Right")]),l("el-radio-button",{attrs:{label:"top"}},[a._v("Top")])],1),l("div",{staticStyle:{margin:"20px"}}),l("el-form",{attrs:{"label-position":a.labelPosition,"label-width":"100px",model:a.formLabelAlign}},[l("el-form-item",{attrs:{label:"Name"}},[l("el-input",{model:{value:a.formLabelAlign.name,callback:function(s){a.$set(a.formLabelAlign,"name",s)},expression:"formLabelAlign.name"}})],1),l("el-form-item",{attrs:{label:"Activity zone"}},[l("el-input",{model:{value:a.formLabelAlign.region,callback:function(s){a.$set(a.formLabelAlign,"region",s)},expression:"formLabelAlign.region"}})],1),l("el-form-item",{attrs:{label:"Activity form"}},[l("el-input",{model:{value:a.formLabelAlign.type,callback:function(s){a.$set(a.formLabelAlign,"type",s)},expression:"formLabelAlign.type"}})],1)],1)],1),l("p",[a._v("The "),l("code",[a._v("label-position")]),a._v(" attribute decides how labels align, it can be "),l("code",[a._v("top")]),a._v(" or "),l("code",[a._v("left")]),a._v(". When set to "),l("code",[a._v("top")]),a._v(", labels will be placed at the top of the form field.")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-radio-group")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"labelPosition"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("size")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"small"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-radio-button")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"left"')]),a._v(">")]),a._v("Left"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-radio-button")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-radio-button")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"right"')]),a._v(">")]),a._v("Right"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-radio-button")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-radio-button")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"top"')]),a._v(">")]),a._v("Top"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-radio-button")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-radio-group")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("div")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("style")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"margin: 20px;"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("div")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":label-position")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"labelPosition"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label-width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"100px"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"formLabelAlign"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Name"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-input")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"formLabelAlign.name"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-input")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Activity zone"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-input")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"formLabelAlign.region"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-input")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Activity form"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-input")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"formLabelAlign.type"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-input")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),l("span",{attrs:{class:"javascript"}},[a._v("\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("export")]),a._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("default")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("data")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("labelPosition")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'right'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("formLabelAlign")]),a._v(": {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("''")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("region")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("''")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("''")]),a._v("\n }\n };\n }\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),a._v("\n")])])])]),a._m(6),l("p",[a._v("Form component allows you to verify your data, helping you find and correct errors.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">\n <el-form-item label="Activity name" prop="name">\n <el-input v-model="ruleForm.name"></el-input>\n </el-form-item>\n <el-form-item label="Activity zone" prop="region">\n <el-select v-model="ruleForm.region" placeholder="Activity zone">\n <el-option label="Zone one" value="shanghai"></el-option>\n <el-option label="Zone two" value="beijing"></el-option>\n </el-select>\n </el-form-item>\n <el-form-item label="Activity time" required>\n <el-col :span="11">\n <el-form-item prop="date1">\n <el-date-picker type="date" placeholder="Pick a date" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>\n </el-form-item>\n </el-col>\n <el-col class="line" :span="2">-</el-col>\n <el-col :span="11">\n <el-form-item prop="date2">\n <el-time-picker type="fixed-time" placeholder="Pick a time" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>\n </el-form-item>\n </el-col>\n </el-form-item>\n <el-form-item label="Instant delivery" prop="delivery">\n <el-switch on-text off-text v-model="ruleForm.delivery"></el-switch>\n </el-form-item>\n <el-form-item label="Activity type" prop="type">\n <el-checkbox-group v-model="ruleForm.type">\n <el-checkbox label="Online activities" name="type"></el-checkbox>\n <el-checkbox label="Promotion activities" name="type"></el-checkbox>\n <el-checkbox label="Offline activities" name="type"></el-checkbox>\n <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>\n </el-checkbox-group>\n </el-form-item>\n <el-form-item label="Resources" prop="resource">\n <el-radio-group v-model="ruleForm.resource">\n <el-radio label="Sponsorship"></el-radio>\n <el-radio label="Venue"></el-radio>\n </el-radio-group>\n </el-form-item>\n <el-form-item label="Activity form" prop="desc">\n <el-input type="textarea" v-model="ruleForm.desc"></el-input>\n </el-form-item>\n <el-form-item>\n <el-button type="primary" @click="submitForm(\'ruleForm\')">Create</el-button>\n <el-button @click="resetForm(\'ruleForm\')">Reset</el-button>\n </el-form-item>\n</el-form>\n\n',script:"\n export default {\n data: function() {\n return {\n ruleForm: {\n name: '',\n region: '',\n date1: '',\n date2: '',\n delivery: false,\n type: [],\n resource: '',\n desc: ''\n },\n rules: {\n name: [\n { required: true, message: 'Please input Activity name', trigger: 'blur' },\n { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }\n ],\n region: [\n { required: true, message: 'Please select Activity zone', trigger: 'change' }\n ],\n date1: [\n { type: 'date', required: true, message: 'Please pick a date', trigger: 'change' }\n ],\n date2: [\n { type: 'date', required: true, message: 'Please pick a time', trigger: 'change' }\n ],\n type: [\n { type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change' }\n ],\n resource: [\n { required: true, message: 'Please select activity resource', trigger: 'change' }\n ],\n desc: [\n { required: true, message: 'Please input activity form', trigger: 'blur' }\n ]\n }\n };\n },\n methods: {\n submitForm: function(formName) {\n this.$refs[formName].validate(function(valid) {\n if (valid) {\n alert('submit!');\n } else {\n console.log('error submit!!');\n return false;\n }\n });\n },\n resetForm: function(formName) {\n this.$refs[formName].resetFields();\n }\n }\n }\n",style:null}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[l("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:a.ruleForm,rules:a.rules,"label-width":"120px"}},[l("el-form-item",{attrs:{label:"Activity name",prop:"name"}},[l("el-input",{model:{value:a.ruleForm.name,callback:function(s){a.$set(a.ruleForm,"name",s)},expression:"ruleForm.name"}})],1),l("el-form-item",{attrs:{label:"Activity zone",prop:"region"}},[l("el-select",{attrs:{placeholder:"Activity zone"},model:{value:a.ruleForm.region,callback:function(s){a.$set(a.ruleForm,"region",s)},expression:"ruleForm.region"}},[l("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),l("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),l("el-form-item",{attrs:{label:"Activity time",required:""}},[l("el-col",{attrs:{span:11}},[l("el-form-item",{attrs:{prop:"date1"}},[l("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:a.ruleForm.date1,callback:function(s){a.$set(a.ruleForm,"date1",s)},expression:"ruleForm.date1"}})],1)],1),l("el-col",{staticClass:"line",attrs:{span:2}},[a._v("-")]),l("el-col",{attrs:{span:11}},[l("el-form-item",{attrs:{prop:"date2"}},[l("el-time-picker",{staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"Pick a time"},model:{value:a.ruleForm.date2,callback:function(s){a.$set(a.ruleForm,"date2",s)},expression:"ruleForm.date2"}})],1)],1)],1),l("el-form-item",{attrs:{label:"Instant delivery",prop:"delivery"}},[l("el-switch",{attrs:{"on-text":"","off-text":""},model:{value:a.ruleForm.delivery,callback:function(s){a.$set(a.ruleForm,"delivery",s)},expression:"ruleForm.delivery"}})],1),l("el-form-item",{attrs:{label:"Activity type",prop:"type"}},[l("el-checkbox-group",{model:{value:a.ruleForm.type,callback:function(s){a.$set(a.ruleForm,"type",s)},expression:"ruleForm.type"}},[l("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),l("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),l("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),l("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),l("el-form-item",{attrs:{label:"Resources",prop:"resource"}},[l("el-radio-group",{model:{value:a.ruleForm.resource,callback:function(s){a.$set(a.ruleForm,"resource",s)},expression:"ruleForm.resource"}},[l("el-radio",{attrs:{label:"Sponsorship"}}),l("el-radio",{attrs:{label:"Venue"}})],1)],1),l("el-form-item",{attrs:{label:"Activity form",prop:"desc"}},[l("el-input",{attrs:{type:"textarea"},model:{value:a.ruleForm.desc,callback:function(s){a.$set(a.ruleForm,"desc",s)},expression:"ruleForm.desc"}})],1),l("el-form-item",[l("el-button",{attrs:{type:"primary"},on:{click:function(s){a.submitForm("ruleForm")}}},[a._v("Create")]),l("el-button",{on:{click:function(s){a.resetForm("ruleForm")}}},[a._v("Reset")])],1)],1)],1),l("p",[a._v("Just add the "),l("code",[a._v("rules")]),a._v(" attribute for "),l("code",[a._v("Form")]),a._v(" component, pass validation rules, and set "),l("code",[a._v("prop")]),a._v(" attribute for "),l("code",[a._v("Form-Item")]),a._v(" as a specific key that needs to be validated. See more information at "),l("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[a._v("async-validator")]),a._v(".")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"ruleForm"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":rules")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"rules"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("ref")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"ruleForm"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label-width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"120px"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("class")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"demo-ruleForm"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Activity name"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"name"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-input")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"ruleForm.name"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-input")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Activity zone"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"region"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-select")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"ruleForm.region"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("placeholder")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Activity zone"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-option")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Zone one"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("value")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"shanghai"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-option")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-option")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Zone two"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("value")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"beijing"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-option")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-select")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Activity time"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("required")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-col")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":span")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"11"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"date1"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-date-picker")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"date"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("placeholder")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Pick a date"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"ruleForm.date1"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("style")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"width: 100%;"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-date-picker")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-col")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-col")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("class")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"line"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":span")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"2"')]),a._v(">")]),a._v("-"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-col")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-col")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":span")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"11"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"date2"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-time-picker")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"fixed-time"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("placeholder")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Pick a time"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"ruleForm.date2"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("style")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"width: 100%;"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-time-picker")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-col")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Instant delivery"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"delivery"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-switch")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("on-text")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('""')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("off-text")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('""')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"ruleForm.delivery"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-switch")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Activity type"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"type"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-checkbox-group")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"ruleForm.type"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-checkbox")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Online activities"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"type"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-checkbox")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-checkbox")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Promotion activities"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"type"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-checkbox")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-checkbox")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Offline activities"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"type"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-checkbox")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-checkbox")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Simple brand exposure"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"type"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-checkbox")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-checkbox-group")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Resources"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"resource"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-radio-group")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"ruleForm.resource"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-radio")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Sponsorship"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-radio")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-radio")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Venue"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-radio")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-radio-group")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Activity form"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"desc"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-input")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"textarea"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"ruleForm.desc"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-input")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"primary"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("@click")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v("\"submitForm('ruleForm')\"")]),a._v(">")]),a._v("Create"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("@click")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v("\"resetForm('ruleForm')\"")]),a._v(">")]),a._v("Reset"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),l("span",{attrs:{class:"javascript"}},[a._v("\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("export")]),a._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("default")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("data")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("ruleForm")]),a._v(": {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("''")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("region")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("''")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date1")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("''")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date2")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("''")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("delivery")]),a._v(": "),l("span",{attrs:{class:"hljs-literal"}},[a._v("false")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v(": [],\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("resource")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("''")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("desc")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("''")]),a._v("\n },\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("rules")]),a._v(": {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": [\n { "),l("span",{attrs:{class:"hljs-attr"}},[a._v("required")]),a._v(": "),l("span",{attrs:{class:"hljs-literal"}},[a._v("true")]),a._v(", "),l("span",{attrs:{class:"hljs-attr"}},[a._v("message")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Please input Activity name'")]),a._v(", "),l("span",{attrs:{class:"hljs-attr"}},[a._v("trigger")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'blur'")]),a._v(" },\n { "),l("span",{attrs:{class:"hljs-attr"}},[a._v("min")]),a._v(": "),l("span",{attrs:{class:"hljs-number"}},[a._v("3")]),a._v(", "),l("span",{attrs:{class:"hljs-attr"}},[a._v("max")]),a._v(": "),l("span",{attrs:{class:"hljs-number"}},[a._v("5")]),a._v(", "),l("span",{attrs:{class:"hljs-attr"}},[a._v("message")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Length should be 3 to 5'")]),a._v(", "),l("span",{attrs:{class:"hljs-attr"}},[a._v("trigger")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'blur'")]),a._v(" }\n ],\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("region")]),a._v(": [\n { "),l("span",{attrs:{class:"hljs-attr"}},[a._v("required")]),a._v(": "),l("span",{attrs:{class:"hljs-literal"}},[a._v("true")]),a._v(", "),l("span",{attrs:{class:"hljs-attr"}},[a._v("message")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Please select Activity zone'")]),a._v(", "),l("span",{attrs:{class:"hljs-attr"}},[a._v("trigger")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'change'")]),a._v(" }\n ],\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date1")]),a._v(": [\n { "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'date'")]),a._v(", "),l("span",{attrs:{class:"hljs-attr"}},[a._v("required")]),a._v(": "),l("span",{attrs:{class:"hljs-literal"}},[a._v("true")]),a._v(", "),l("span",{attrs:{class:"hljs-attr"}},[a._v("message")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Please pick a date'")]),a._v(", "),l("span",{attrs:{class:"hljs-attr"}},[a._v("trigger")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'change'")]),a._v(" }\n ],\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date2")]),a._v(": [\n { "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'date'")]),a._v(", "),l("span",{attrs:{class:"hljs-attr"}},[a._v("required")]),a._v(": "),l("span",{attrs:{class:"hljs-literal"}},[a._v("true")]),a._v(", "),l("span",{attrs:{class:"hljs-attr"}},[a._v("message")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Please pick a time'")]),a._v(", "),l("span",{attrs:{class:"hljs-attr"}},[a._v("trigger")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'change'")]),a._v(" }\n ],\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v(": [\n { "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'array'")]),a._v(", "),l("span",{attrs:{class:"hljs-attr"}},[a._v("required")]),a._v(": "),l("span",{attrs:{class:"hljs-literal"}},[a._v("true")]),a._v(", "),l("span",{attrs:{class:"hljs-attr"}},[a._v("message")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Please select at least one activity type'")]),a._v(", "),l("span",{attrs:{class:"hljs-attr"}},[a._v("trigger")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'change'")]),a._v(" }\n ],\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("resource")]),a._v(": [\n { "),l("span",{attrs:{class:"hljs-attr"}},[a._v("required")]),a._v(": "),l("span",{attrs:{class:"hljs-literal"}},[a._v("true")]),a._v(", "),l("span",{attrs:{class:"hljs-attr"}},[a._v("message")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Please select activity resource'")]),a._v(", "),l("span",{attrs:{class:"hljs-attr"}},[a._v("trigger")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'change'")]),a._v(" }\n ],\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("desc")]),a._v(": [\n { "),l("span",{attrs:{class:"hljs-attr"}},[a._v("required")]),a._v(": "),l("span",{attrs:{class:"hljs-literal"}},[a._v("true")]),a._v(", "),l("span",{attrs:{class:"hljs-attr"}},[a._v("message")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Please input activity form'")]),a._v(", "),l("span",{attrs:{class:"hljs-attr"}},[a._v("trigger")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'blur'")]),a._v(" }\n ]\n }\n };\n },\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("methods")]),a._v(": {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("submitForm")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("formName")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".$refs[formName].validate("),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("valid")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("if")]),a._v(" (valid) {\n alert("),l("span",{attrs:{class:"hljs-string"}},[a._v("'submit!'")]),a._v(");\n } "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("else")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-built_in"}},[a._v("console")]),a._v(".log("),l("span",{attrs:{class:"hljs-string"}},[a._v("'error submit!!'")]),a._v(");\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" "),l("span",{attrs:{class:"hljs-literal"}},[a._v("false")]),a._v(";\n }\n });\n },\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("resetForm")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("formName")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".$refs[formName].resetFields();\n }\n }\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),a._v("\n")])])])]),a._m(7),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">\n <el-form-item label="Password" prop="pass">\n <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>\n </el-form-item>\n <el-form-item label="Confirm" prop="checkPass">\n <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>\n </el-form-item>\n <el-form-item label="Age" prop="age">\n <el-input v-model.number="ruleForm2.age"></el-input>\n </el-form-item>\n <el-form-item>\n <el-button type="primary" @click="submitForm(\'ruleForm2\')">Submit</el-button>\n <el-button @click="resetForm(\'ruleForm2\')">Reset</el-button>\n </el-form-item>\n</el-form>\n\n',script:"\n export default {\n data: function() {\n var checkAge = function(rule, value, callback) {\n if (!value) {\n return callback(new Error('Please input the age'));\n }\n setTimeout(function() {\n if (!Number.isInteger(value)) {\n callback(new Error('Please input digits'));\n } else {\n if (value < 18) {\n callback(new Error('Age must be greater than 18'));\n } else {\n callback();\n }\n }\n }, 1000);\n };\n var validatePass = function(rule, value, callback) {\n if (value === '') {\n callback(new Error('Please input the password'));\n } else {\n if (this.ruleForm2.checkPass !== '') {\n this.$refs.ruleForm2.validateField('checkPass');\n }\n callback();\n }\n };\n var validatePass2 = function(rule, value, callback) {\n if (value === '') {\n callback(new Error('Please input the password again'));\n } else if (value !== this.ruleForm2.pass) {\n callback(new Error('Two inputs don\\'t match!'));\n } else {\n callback();\n }\n };\n return {\n ruleForm2: {\n pass: '',\n checkPass: '',\n age: ''\n },\n rules2: {\n pass: [\n { validator: validatePass, trigger: 'blur' }\n ],\n checkPass: [\n { validator: validatePass2, trigger: 'blur' }\n ],\n age: [\n { validator: checkAge, trigger: 'blur' }\n ]\n }\n };\n },\n methods: {\n submitForm: function(formName) {\n this.$refs[formName].validate(function(valid) {\n if (valid) {\n alert('submit!');\n } else {\n console.log('error submit!!');\n return false;\n }\n });\n },\n resetForm: function(formName) {\n this.$refs[formName].resetFields();\n }\n }\n }\n",style:null}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[l("el-form",{ref:"ruleForm2",staticClass:"demo-ruleForm",attrs:{model:a.ruleForm2,rules:a.rules2,"label-width":"120px"}},[l("el-form-item",{attrs:{label:"Password",prop:"pass"}},[l("el-input",{attrs:{type:"password","auto-complete":"off"},model:{value:a.ruleForm2.pass,callback:function(s){a.$set(a.ruleForm2,"pass",s)},expression:"ruleForm2.pass"}})],1),l("el-form-item",{attrs:{label:"Confirm",prop:"checkPass"}},[l("el-input",{attrs:{type:"password","auto-complete":"off"},model:{value:a.ruleForm2.checkPass,callback:function(s){a.$set(a.ruleForm2,"checkPass",s)},expression:"ruleForm2.checkPass"}})],1),l("el-form-item",{attrs:{label:"Age",prop:"age"}},[l("el-input",{model:{value:a.ruleForm2.age,callback:function(s){a.$set(a.ruleForm2,"age",a._n(s))},expression:"ruleForm2.age"}})],1),l("el-form-item",[l("el-button",{attrs:{type:"primary"},on:{click:function(s){a.submitForm("ruleForm2")}}},[a._v("Submit")]),l("el-button",{on:{click:function(s){a.resetForm("ruleForm2")}}},[a._v("Reset")])],1)],1)],1),l("p",[a._v("This example shows how to customize your own validation rules to finish a two-factor password verification.")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"ruleForm2"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":rules")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"rules2"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("ref")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"ruleForm2"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label-width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"120px"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("class")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"demo-ruleForm"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Password"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"pass"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-input")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"password"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"ruleForm2.pass"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("auto-complete")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"off"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-input")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Confirm"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"checkPass"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-input")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"password"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"ruleForm2.checkPass"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("auto-complete")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"off"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-input")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Age"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"age"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-input")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-model.number")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"ruleForm2.age"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-input")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"primary"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("@click")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v("\"submitForm('ruleForm2')\"")]),a._v(">")]),a._v("Submit"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("@click")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v("\"resetForm('ruleForm2')\"")]),a._v(">")]),a._v("Reset"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),l("span",{attrs:{class:"javascript"}},[a._v("\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("export")]),a._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("default")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("data")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("var")]),a._v(" checkAge = "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("rule, value, callback")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("if")]),a._v(" (!value) {\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" callback("),l("span",{attrs:{class:"hljs-keyword"}},[a._v("new")]),a._v(" "),l("span",{attrs:{class:"hljs-built_in"}},[a._v("Error")]),a._v("("),l("span",{attrs:{class:"hljs-string"}},[a._v("'Please input the age'")]),a._v("));\n }\n setTimeout("),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("if")]),a._v(" (!"),l("span",{attrs:{class:"hljs-built_in"}},[a._v("Number")]),a._v(".isInteger(value)) {\n callback("),l("span",{attrs:{class:"hljs-keyword"}},[a._v("new")]),a._v(" "),l("span",{attrs:{class:"hljs-built_in"}},[a._v("Error")]),a._v("("),l("span",{attrs:{class:"hljs-string"}},[a._v("'Please input digits'")]),a._v("));\n } "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("else")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("if")]),a._v(" (value < "),l("span",{attrs:{class:"hljs-number"}},[a._v("18")]),a._v(") {\n callback("),l("span",{attrs:{class:"hljs-keyword"}},[a._v("new")]),a._v(" "),l("span",{attrs:{class:"hljs-built_in"}},[a._v("Error")]),a._v("("),l("span",{attrs:{class:"hljs-string"}},[a._v("'Age must be greater than 18'")]),a._v("));\n } "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("else")]),a._v(" {\n callback();\n }\n }\n }, "),l("span",{attrs:{class:"hljs-number"}},[a._v("1000")]),a._v(");\n };\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("var")]),a._v(" validatePass = "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("rule, value, callback")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("if")]),a._v(" (value === "),l("span",{attrs:{class:"hljs-string"}},[a._v("''")]),a._v(") {\n callback("),l("span",{attrs:{class:"hljs-keyword"}},[a._v("new")]),a._v(" "),l("span",{attrs:{class:"hljs-built_in"}},[a._v("Error")]),a._v("("),l("span",{attrs:{class:"hljs-string"}},[a._v("'Please input the password'")]),a._v("));\n } "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("else")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("if")]),a._v(" ("),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".ruleForm2.checkPass !== "),l("span",{attrs:{class:"hljs-string"}},[a._v("''")]),a._v(") {\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".$refs.ruleForm2.validateField("),l("span",{attrs:{class:"hljs-string"}},[a._v("'checkPass'")]),a._v(");\n }\n callback();\n }\n };\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("var")]),a._v(" validatePass2 = "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("rule, value, callback")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("if")]),a._v(" (value === "),l("span",{attrs:{class:"hljs-string"}},[a._v("''")]),a._v(") {\n callback("),l("span",{attrs:{class:"hljs-keyword"}},[a._v("new")]),a._v(" "),l("span",{attrs:{class:"hljs-built_in"}},[a._v("Error")]),a._v("("),l("span",{attrs:{class:"hljs-string"}},[a._v("'Please input the password again'")]),a._v("));\n } "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("else")]),a._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("if")]),a._v(" (value !== "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".ruleForm2.pass) {\n callback("),l("span",{attrs:{class:"hljs-keyword"}},[a._v("new")]),a._v(" "),l("span",{attrs:{class:"hljs-built_in"}},[a._v("Error")]),a._v("("),l("span",{attrs:{class:"hljs-string"}},[a._v("'Two inputs don\\'t match!'")]),a._v("));\n } "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("else")]),a._v(" {\n callback();\n }\n };\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("ruleForm2")]),a._v(": {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("pass")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("''")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("checkPass")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("''")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("age")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("''")]),a._v("\n },\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("rules2")]),a._v(": {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("pass")]),a._v(": [\n { "),l("span",{attrs:{class:"hljs-attr"}},[a._v("validator")]),a._v(": validatePass, "),l("span",{attrs:{class:"hljs-attr"}},[a._v("trigger")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'blur'")]),a._v(" }\n ],\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("checkPass")]),a._v(": [\n { "),l("span",{attrs:{class:"hljs-attr"}},[a._v("validator")]),a._v(": validatePass2, "),l("span",{attrs:{class:"hljs-attr"}},[a._v("trigger")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'blur'")]),a._v(" }\n ],\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("age")]),a._v(": [\n { "),l("span",{attrs:{class:"hljs-attr"}},[a._v("validator")]),a._v(": checkAge, "),l("span",{attrs:{class:"hljs-attr"}},[a._v("trigger")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'blur'")]),a._v(" }\n ]\n }\n };\n },\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("methods")]),a._v(": {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("submitForm")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("formName")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".$refs[formName].validate("),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("valid")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("if")]),a._v(" (valid) {\n alert("),l("span",{attrs:{class:"hljs-string"}},[a._v("'submit!'")]),a._v(");\n } "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("else")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-built_in"}},[a._v("console")]),a._v(".log("),l("span",{attrs:{class:"hljs-string"}},[a._v("'error submit!!'")]),a._v(");\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" "),l("span",{attrs:{class:"hljs-literal"}},[a._v("false")]),a._v(";\n }\n });\n },\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("resetForm")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("formName")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".$refs[formName].resetFields();\n }\n }\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),a._v("\n")])])])]),a._m(8),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" class="demo-dynamic">\n <el-form-item prop="email" label="Email" :rules="[\n { required: true, message: \'Please input email address\', trigger: \'blur\' },\n { type: \'email\', message: \'Please input correct email address\', trigger: \'blur,change\' }\n ]">\n <el-input v-model="dynamicValidateForm.email"></el-input>\n </el-form-item>\n <el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :label="\'Domain\' + index" :key="domain.key" :prop="\'domains.\' + index + \'.value\'" :rules="{\n required: true, message: \'domain can not be null\', trigger: \'blur\'\n }">\n <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>\n </el-form-item>\n <el-form-item>\n <el-button type="primary" @click="submitForm(\'dynamicValidateForm\')">Submit</el-button>\n <el-button @click="addDomain">New domain</el-button>\n <el-button @click="resetForm(\'dynamicValidateForm\')">Reset</el-button>\n </el-form-item>\n</el-form>\n\n',script:"\n export default {\n data: function() {\n return {\n dynamicValidateForm: {\n domains: [{\n key: 1,\n value: ''\n }],\n email: ''\n }\n };\n },\n methods: {\n submitForm: function(formName) {\n this.$refs[formName].validate(function(valid) {\n if (valid) {\n alert('submit!');\n } else {\n console.log('error submit!!');\n return false;\n }\n });\n },\n resetForm: function(formName) {\n this.$refs[formName].resetFields();\n },\n removeDomain: function(item) {\n var index = this.dynamicValidateForm.domains.indexOf(item);\n if (index !== -1) {\n this.dynamicValidateForm.domains.splice(index, 1);\n }\n },\n addDomain: function() {\n this.dynamicValidateForm.domains.push({\n key: Date.now(),\n value: ''\n });\n }\n }\n }\n",style:null}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[l("el-form",{ref:"dynamicValidateForm",staticClass:"demo-dynamic",attrs:{model:a.dynamicValidateForm,"label-width":"120px"}},[l("el-form-item",{attrs:{prop:"email",label:"Email",rules:[{required:!0,message:"Please input email address",trigger:"blur"},{type:"email",message:"Please input correct email address",trigger:"blur,change"}]}},[l("el-input",{model:{value:a.dynamicValidateForm.email,callback:function(s){a.$set(a.dynamicValidateForm,"email",s)},expression:"dynamicValidateForm.email"}})],1),a._l(a.dynamicValidateForm.domains,function(t,s){return l("el-form-item",{key:t.key,attrs:{label:"Domain"+s,prop:"domains."+s+".value",rules:{required:!0,message:"domain can not be null",trigger:"blur"}}},[l("el-input",{model:{value:t.value,callback:function(s){a.$set(t,"value",s)},expression:"domain.value"}}),l("el-button",{on:{click:function(s){s.preventDefault(),a.removeDomain(t)}}},[a._v("Delete")])],1)}),l("el-form-item",[l("el-button",{attrs:{type:"primary"},on:{click:function(s){a.submitForm("dynamicValidateForm")}}},[a._v("Submit")]),l("el-button",{on:{click:a.addDomain}},[a._v("New domain")]),l("el-button",{on:{click:function(s){a.resetForm("dynamicValidateForm")}}},[a._v("Reset")])],1)],2)],1),l("p",[a._v("In addition to passing all validation rules at once on the form component, you can also pass the validation rules or delete rules on a single form field dynamically.")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"dynamicValidateForm"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("ref")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"dynamicValidateForm"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label-width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"120px"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("class")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"demo-dynamic"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"email"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Email"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":rules")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v("\"[\n { required: true, message: 'Please input email address', trigger: 'blur' },\n { type: 'email', message: 'Please input correct email address', trigger: 'blur,change' }\n ]\"")]),a._v("\n >")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-input")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"dynamicValidateForm.email"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-input")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-for")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"(domain, index) in dynamicValidateForm.domains"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v("\"'Domain' + index\"")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":key")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"domain.key"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v("\"'domains.' + index + '.value'\"")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":rules")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v("\"{\n required: true, message: 'domain can not be null', trigger: 'blur'\n }\"")]),a._v("\n >")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-input")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"domain.value"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-input")]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("@click.prevent")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"removeDomain(domain)"')]),a._v(">")]),a._v("Delete"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"primary"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("@click")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v("\"submitForm('dynamicValidateForm')\"")]),a._v(">")]),a._v("Submit"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("@click")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"addDomain"')]),a._v(">")]),a._v("New domain"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("@click")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v("\"resetForm('dynamicValidateForm')\"")]),a._v(">")]),a._v("Reset"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),l("span",{attrs:{class:"javascript"}},[a._v("\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("export")]),a._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("default")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("data")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("dynamicValidateForm")]),a._v(": {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("domains")]),a._v(": [{\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("key")]),a._v(": "),l("span",{attrs:{class:"hljs-number"}},[a._v("1")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("value")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("''")]),a._v("\n }],\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("email")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("''")]),a._v("\n }\n };\n },\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("methods")]),a._v(": {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("submitForm")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("formName")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".$refs[formName].validate("),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("valid")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("if")]),a._v(" (valid) {\n alert("),l("span",{attrs:{class:"hljs-string"}},[a._v("'submit!'")]),a._v(");\n } "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("else")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-built_in"}},[a._v("console")]),a._v(".log("),l("span",{attrs:{class:"hljs-string"}},[a._v("'error submit!!'")]),a._v(");\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" "),l("span",{attrs:{class:"hljs-literal"}},[a._v("false")]),a._v(";\n }\n });\n },\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("resetForm")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("formName")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".$refs[formName].resetFields();\n },\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("removeDomain")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("item")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("var")]),a._v(" index = "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".dynamicValidateForm.domains.indexOf(item);\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("if")]),a._v(" (index !== "),l("span",{attrs:{class:"hljs-number"}},[a._v("-1")]),a._v(") {\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".dynamicValidateForm.domains.splice(index, "),l("span",{attrs:{class:"hljs-number"}},[a._v("1")]),a._v(");\n }\n },\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("addDomain")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".dynamicValidateForm.domains.push({\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("key")]),a._v(": "),l("span",{attrs:{class:"hljs-built_in"}},[a._v("Date")]),a._v(".now(),\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("value")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("''")]),a._v("\n });\n }\n }\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),a._v("\n")])])])]),a._m(9),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">\n <el-form-item label="age" prop="age" :rules="[\n { required: true, message: \'age is required\'},\n { type: \'number\', message: \'age must be a number\'}\n ]">\n <el-input type="age" v-model.number="numberValidateForm.age" auto-complete="off"></el-input>\n </el-form-item>\n <el-form-item>\n <el-button type="primary" @click="submitForm(\'numberValidateForm\')">Submit</el-button>\n <el-button @click="resetForm(\'numberValidateForm\')">Reset</el-button>\n </el-form-item>\n</el-form>\n\n',script:"\n export default {\n data: function() {\n return {\n numberValidateForm: {\n age: ''\n }\n };\n },\n methods: {\n submitForm: function(formName) {\n this.$refs[formName].validate(function(valid) {\n if (valid) {\n alert('submit!');\n } else {\n console.log('error submit!!');\n return false;\n }\n });\n },\n resetForm: function(formName) {\n this.$refs[formName].resetFields();\n }\n }\n }\n",style:null}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[l("el-form",{ref:"numberValidateForm",staticClass:"demo-ruleForm",attrs:{model:a.numberValidateForm,"label-width":"100px"}},[l("el-form-item",{attrs:{label:"age",prop:"age",rules:[{required:!0,message:"age is required"},{type:"number",message:"age must be a number"}]}},[l("el-input",{attrs:{type:"age","auto-complete":"off"},model:{value:a.numberValidateForm.age,callback:function(s){a.$set(a.numberValidateForm,"age",a._n(s))},expression:"numberValidateForm.age"}})],1),l("el-form-item",[l("el-button",{attrs:{type:"primary"},on:{click:function(s){a.submitForm("numberValidateForm")}}},[a._v("Submit")]),l("el-button",{on:{click:function(s){a.resetForm("numberValidateForm")}}},[a._v("Reset")])],1)],1)],1),l("p",[a._v("Number Validate need a "),l("code",[a._v(".number")]),a._v(" modifier added on the input "),l("code",[a._v("v-model")]),a._v(" binding,it's used to transform the string value to the number which is provided by Vuejs.")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"numberValidateForm"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("ref")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"numberValidateForm"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label-width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"100px"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("class")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"demo-ruleForm"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"age"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"age"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":rules")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v("\"[\n { required: true, message: 'age is required'},\n { type: 'number', message: 'age must be a number'}\n ]\"")]),a._v("\n >")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-input")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"age"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-model.number")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"numberValidateForm.age"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("auto-complete")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"off"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-input")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"primary"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("@click")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v("\"submitForm('numberValidateForm')\"")]),a._v(">")]),a._v("Submit"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("@click")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v("\"resetForm('numberValidateForm')\"")]),a._v(">")]),a._v("Reset"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form-item")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-form")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),l("span",{attrs:{class:"javascript"}},[a._v("\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("export")]),a._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("default")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("data")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("numberValidateForm")]),a._v(": {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("age")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("''")]),a._v("\n }\n };\n },\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("methods")]),a._v(": {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("submitForm")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("formName")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".$refs[formName].validate("),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("valid")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("if")]),a._v(" (valid) {\n alert("),l("span",{attrs:{class:"hljs-string"}},[a._v("'submit!'")]),a._v(");\n } "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("else")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-built_in"}},[a._v("console")]),a._v(".log("),l("span",{attrs:{class:"hljs-string"}},[a._v("'error submit!!'")]),a._v(");\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" "),l("span",{attrs:{class:"hljs-literal"}},[a._v("false")]),a._v(";\n }\n });\n },\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("resetForm")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("formName")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".$refs[formName].resetFields();\n }\n }\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),a._v("\n")])])])]),a._m(10),a._m(11),a._m(12),a._m(13),a._m(14),a._m(15),a._m(16),a._m(17),a._m(18)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"form"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[s._v("Form consists of "),t("code",{pre:!0},[s._v("input")]),s._v(", "),t("code",{pre:!0},[s._v("radio")]),s._v(", "),t("code",{pre:!0},[s._v("select")]),s._v(", "),t("code",{pre:!0},[s._v("checkbox")]),s._v(" and so on. With form, you can collect, verify and submit data.")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"basic-form"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic form")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[s._v("It includes all kinds of input items, such as "),t("code",{pre:!0},[s._v("input")]),s._v(", "),t("code",{pre:!0},[s._v("select")]),s._v(", "),t("code",{pre:!0},[s._v("radio")]),s._v(" and "),t("code",{pre:!0},[s._v("checkbox")]),s._v(".")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"inline-form"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#inline-form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Inline form")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"alignment"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#alignment","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alignment")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"validation"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#validation","aria-hidden":"true"}},[this._v("¶")]),this._v(" Validation")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"custom-validation-rules"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#custom-validation-rules","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom validation rules")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"delete-or-add-form-items-dynamically"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#delete-or-add-form-items-dynamically","aria-hidden":"true"}},[this._v("¶")]),this._v(" Delete or add form items dynamically")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"number-validate"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#number-validate","aria-hidden":"true"}},[this._v("¶")]),this._v(" Number Validate")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("div",{staticClass:"tip"},[t("p",[s._v("When an "),t("code",{pre:!0},[s._v("el-form-item")]),s._v(" is nested in another "),t("code",{pre:!0},[s._v("el-form-item")]),s._v(", its label width will be "),t("code",{pre:!0},[s._v("0")]),s._v(". You can set "),t("code",{pre:!0},[s._v("label-width")]),s._v(" on that "),t("code",{pre:!0},[s._v("el-form-item")]),s._v(" if needed.")])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"form-attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#form-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("model")]),t("td",[s._v("data of form component")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("rules")]),t("td",[s._v("validation rules of form")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("inline")]),t("td",[s._v("whether the form is inline")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("label-position")]),t("td",[s._v("position of label")]),t("td",[s._v("string")]),t("td",[s._v("left/right/top")]),t("td",[s._v("right")])]),t("tr",[t("td",[s._v("label-width")]),t("td",[s._v("width of label, and all its direct child form items will inherit this value")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("label-suffix")]),t("td",[s._v("suffix of the label")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("show-message")]),t("td",[s._v("whether to show the error message")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"form-methods"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#form-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Methods")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Method")]),t("th",[s._v("Description")]),t("th",[s._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[s._v("validate")]),t("td",[s._v("the method to validate the whole form")]),t("td",[s._v("Function(callback: Function(boolean))")])]),t("tr",[t("td",[s._v("validateField")]),t("td",[s._v("the method to validate a certain form item")]),t("td",[s._v("Function(prop: string, callback: Function(errorMessage: string))")])]),t("tr",[t("td",[s._v("resetFields")]),t("td",[s._v("reset all the fields and remove validation result")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"form-item-attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#form-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("prop")]),t("td",[s._v("a key of "),t("code",{pre:!0},[s._v("model")]),s._v(". In the use of validate and resetFields method, the attribute is required")]),t("td",[s._v("string")]),t("td",[s._v("keys of model that passed to "),t("code",{pre:!0},[s._v("form")])]),t("td")]),t("tr",[t("td",[s._v("label")]),t("td",[s._v("label")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("label-width")]),t("td",[s._v("width of label, e.g. '50px'")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("required")]),t("td",[s._v("whether the field is required or not, will be determined by validation rules if omitted")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("rules")]),t("td",[s._v("validation rules of form")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("error")]),t("td",[s._v("field error message, set its value and the field will validate error and show this message immediately")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("show-message")]),t("td",[s._v("whether to show the error message")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"form-item-slot"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#form-item-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Slot")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("name")]),t("th",[s._v("Description")])])]),t("tbody",[t("tr",[t("td",[s._v("—")]),t("td",[s._v("content of Form Item")])]),t("tr",[t("td",[s._v("label")]),t("td",[s._v("content of label")])])])])}],!1,null,null,null);t.default=a.exports},854:function(s,t,a){"use strict";a.r(t);var l=a(520),n={ready:function(){Object(l.a)(this.$el.parentNode,"no-toc")}},a=a(0),a=Object(a.a)(n,function(){var s=this.$createElement;this._self._c;return this._m(0)},[function(){var s=this.$createElement,s=this._self._c||s;return s("section",[s("h1",[this._v("Components Document")])])}],!1,null,null,null);t.default=a.exports},855:function(s,t,a){"use strict";a.r(t);var l=a(522),n={data:function(){return{icons:l}}},a=(a(740),a(0)),a=Object(a.a)(n,function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("section",[t._m(0),a("p",[t._v("YufpWP provides a set of common icons.")]),t._m(1),t._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<i class="el-icon-edit"></i>\n<i class="el-icon-share"></i>\n<i class="el-icon-delete"></i>\n<el-button type="primary" icon="search">Search</el-button>\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("i",{staticClass:"el-icon-edit"}),a("i",{staticClass:"el-icon-share"}),a("i",{staticClass:"el-icon-delete"}),a("el-button",{attrs:{type:"primary",icon:"search"}},[t._v("Search")])],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("i")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"el-icon-edit"')]),t._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("i")]),t._v(">")]),t._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("i")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"el-icon-share"')]),t._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("i")]),t._v(">")]),t._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("i")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"el-icon-delete"')]),t._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("i")]),t._v(">")]),t._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("type")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"primary"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("icon")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"search"')]),t._v(">")]),t._v("Search"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n\n")])])])]),t._m(3),a("ul",{staticClass:"icon-list"},t._l(t.icons,function(s){return a("li",{key:s},[a("span",[a("i",{class:"el-icon-"+s}),t._v("\n "+t._s("el-icon-"+s)+"\n ")])])})),t._m(4),t._m(5),t._m(6),t._m(7),t._m(8),t._m(9),a("p",[t._v("Now you can use them as you do with YufpWP built-in icons. For example, in el-input:")]),t._m(10)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"icon"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icon")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"basic-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[s._v("Just assign the class name to "),t("code",{pre:!0},[s._v("el-icon-iconName")]),s._v(".")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"icons"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#icons","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icons")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"third-party-icons"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#third-party-icons","aria-hidden":"true"}},[this._v("¶")]),this._v(" Third-party icons")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[s._v("Some of YufpWP's components has an "),t("code",{pre:!0},[s._v("icon")]),s._v(" attribute, e.g. Input. If you want to use a third-party icon in the "),t("code",{pre:!0},[s._v("icon")]),s._v(" attribute, here's what you need to do:")])},function(){var s=this.$createElement,s=this._self._c||s;return s("p",[s("span",[this._v("1.")]),this._v(" Modify the class name prefix of the third-party library\n")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[s._v("Please read third-party icon library documentation on how to do it. For example, if you're using "),t("a",{attrs:{href:"http://iconfont.cn/"}},[s._v("iconfont.cn")]),s._v(', you can find prefix editor in the "Edit Project" dialog. If you\'re using '),t("a",{attrs:{href:"http://fontawesome.io/"}},[s._v("Font Awesome")]),s._v(", you can refer to "),t("a",{attrs:{href:"https://github.com/YuwpUI/element-font-awesome"}},[s._v("this demo")]),s._v(".")])},function(){var s=this.$createElement,s=this._self._c||s;return s("p",[s("span",[this._v("2.")]),this._v(" Add some CSS:\n")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-CSS"}},[t("span",{attrs:{class:"hljs-selector-attr"}},[s._v("[class^="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-my"')]),s._v("]")]),s._v(", "),t("span",{attrs:{class:"hljs-selector-attr"}},[s._v("[class*="),t("span",{attrs:{class:"hljs-string"}},[s._v('" el-icon-my"')]),s._v("]")]),s._v(" {\n"),t("span",{attrs:{class:"hljs-attribute"}},[s._v("font-family")]),s._v(":"),t("span",{attrs:{class:"hljs-string"}},[s._v('"your-font-family"')]),s._v(" "),t("span",{attrs:{class:"hljs-meta"}},[s._v("!important")]),s._v(";\n\n"),t("span",{attrs:{class:"hljs-comment"}},[s._v("/* The following is based on original CSS rules of third-party library */")]),s._v("\n"),t("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": inherit;\n"),t("span",{attrs:{class:"hljs-attribute"}},[s._v("font-style")]),s._v(":normal;\n"),t("span",{attrs:{class:"hljs-attribute"}},[s._v("-webkit-font-smoothing")]),s._v(": antialiased;\n"),t("span",{attrs:{class:"hljs-attribute"}},[s._v("-moz-osx-font-smoothing")]),s._v(": grayscale;\n}\n")])])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"my-xxx"')]),s._v(" />")]),s._v("\n")])])}],!1,null,null,null);t.default=a.exports},856:function(s,t,a){"use strict";a.r(t);var l={data:function(){return{num1:1,num2:1,num3:5,num4:1,num5:1,num6:1}},methods:{handleChange:function(s){console.log(s)}}},a=(a(741),a(0)),a=Object(a.a)(l,function(){var t=this,s=t.$createElement,s=t._self._c||s;return s("section",[t._m(0),s("p",[t._v("Input numerical values with a customizable range.")]),t._m(1),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>\n</template>\n\n',script:"\n export default {\n data: function() {\n return {\n num1: 1\n };\n },\n methods: {\n handleChange: function(value) {\n console.log(value)\n }\n }\n };\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[s("el-input-number",{attrs:{min:1,max:10},on:{change:t.handleChange},model:{value:t.num1,callback:function(s){t.num1=s},expression:"num1"}})]],2),s("p",[t._v("Bind a variable to "),s("code",[t._v("v-model")]),t._v(" in "),s("code",[t._v("<el-input-number>")]),t._v(" element and you are set.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input-number")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"num1"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@change")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleChange"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":min")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"1"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":max")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"10"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input-number")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("num1")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("1")]),t._v("\n };\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("methods")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("handleChange")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("value")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("console")]),t._v(".log(value)\n }\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(2),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-input-number v-model="num2" :disabled="true"></el-input-number>\n</template>\n\n',script:"\n export default {\n data: function() {\n return {\n num2: 1\n }\n }\n };\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[s("el-input-number",{attrs:{disabled:!0},model:{value:t.num2,callback:function(s){t.num2=s},expression:"num2"}})]],2),s("p",[t._v("The "),s("code",[t._v("disabled")]),t._v(" attribute accepts a "),s("code",[t._v("boolean")]),t._v(", and if the value is "),s("code",[t._v("true")]),t._v(", the component is disabled. If you just need to control the value within a range, you can add "),s("code",[t._v("min")]),t._v(" attribute to set the minimum value and "),s("code",[t._v("max")]),t._v(" to set the maximum value. By default, the minimum value is "),s("code",[t._v("0")]),t._v(".")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input-number")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"num2"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":disabled")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"true"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input-number")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("num2")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("1")]),t._v("\n }\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(3),s("p",[t._v("Allows you to define incremental steps.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-input-number v-model="num3" :step="2"></el-input-number>\n</template>\n\n',script:"\n export default {\n data: function() {\n return {\n num3: 5\n }\n }\n };\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[s("el-input-number",{attrs:{step:2},model:{value:t.num3,callback:function(s){t.num3=s},expression:"num3"}})]],2),s("p",[t._v("Add "),s("code",[t._v("step")]),t._v(" attribute to set the step.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input-number")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"num3"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":step")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"2"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input-number")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("num3")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("5")]),t._v("\n }\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(4),t._m(5),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-input-number size="large" v-model="num4"></el-input-number>\n <el-input-number v-model="num5"></el-input-number>\n <el-input-number size="small" v-model="num6"></el-input-number>\n</template>\n\n',script:"\n export default {\n data: function() {\n return {\n num4: 1,\n num5: 1,\n num6: 1\n }\n }\n };\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[s("el-input-number",{attrs:{size:"large"},model:{value:t.num4,callback:function(s){t.num4=s},expression:"num4"}}),s("el-input-number",{model:{value:t.num5,callback:function(s){t.num5=s},expression:"num5"}}),s("el-input-number",{attrs:{size:"small"},model:{value:t.num6,callback:function(s){t.num6=s},expression:"num6"}})]],2),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input-number")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("size")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"large"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"num4"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input-number")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input-number")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"num5"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input-number")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input-number")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("size")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"small"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"num6"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input-number")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("num4")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("1")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("num5")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("1")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("num6")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("1")]),t._v("\n }\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(6),t._m(7),t._m(8),t._m(9)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"inputnumber"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber","aria-hidden":"true"}},[this._v("¶")]),this._v(" InputNumber")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"basic-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"disabled"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"steps"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"size"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#size","aria-hidden":"true"}},[this._v("¶")]),this._v(" Size")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[s._v("Additional "),t("code",{pre:!0},[s._v("large")]),s._v(" and "),t("code",{pre:!0},[s._v("small")]),s._v(" sizes of the input box are available")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("value")]),t("td",[s._v("binding value")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("min")]),t("td",[s._v("the minimum allowed value")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("max")]),t("td",[s._v("the maximum allowed value")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[t("code",{pre:!0},[s._v("Infinity")])])]),t("tr",[t("td",[s._v("step")]),t("td",[s._v("incremental step")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("1")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("size of the component")]),t("td",[s._v("string")]),t("td",[s._v("large/small")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("whether the component is disabled")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("controls")]),t("td",[s._v("whether to enable the control buttons")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("debounce")]),t("td",[s._v("debounce delay when typing, in millisecond")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("300")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"events"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Event Name")]),t("th",[s._v("Description")]),t("th",[s._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("triggers when the value changes")]),t("td",[s._v("value after change")])])])])}],!1,null,null,null);t.default=a.exports},857:function(s,t,a){"use strict";a.r(t);a(4).a.component("my-item-en",{functional:!0,render:function(s,t){var a=t.props.item;return s("li",t.data,[s("div",{attrs:{class:"value"}},[a.value]),s("span",{attrs:{class:"link"}},[a.link])])},props:{item:{type:Object,required:!0}}});var l={data:function(){return{links:[],input:"",input1:"",input2:"",input3:"",input4:"",input5:"",input6:"",input7:"",input8:"",input9:"",textarea:"",textarea2:"",textarea3:"",select:"",state1:"",state2:"",state3:"",state4:""}},methods:{loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},querySearch:function(s,t){var a=this.links;t(s?a.filter(this.createStateFilter(s)):a)},querySearchAsync:function(s,t){var a=this.links,l=s?a.filter(this.createStateFilter(s)):a;clearTimeout(this.timeout),this.timeout=setTimeout(function(){t(l)},3e3*Math.random())},createStateFilter:function(t){return function(s){return 0===s.value.indexOf(t.toLowerCase())}},handleSelect:function(s){console.log(s)},handleIconClick:function(s){console.log(s)}},mounted:function(){this.links=this.loadAll()}},a=(a(742),a(0)),a=Object(a.a)(l,function(){var t=this,s=t.$createElement,s=t._self._c||s;return s("section",[t._m(0),s("p",[t._v("Input data using mouse or keyboard.")]),t._m(1),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input placeholder="Please input" v-model="input"></el-input>\n\n\n',script:"\nexport default {\n data: function() {\n return {\n input: ''\n }\n }\n}\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-input",{attrs:{placeholder:"Please input"},model:{value:t.input,callback:function(s){t.input=s},expression:"input"}})],1),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Please input"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"input"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n"),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("input")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v("\n }\n }\n}\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(2),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input placeholder="Please input" v-model="input1" :disabled="true">\n</el-input>\n\n\n',script:"\nexport default {\n data: function() {\n return {\n input1: ''\n }\n }\n}\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-input",{attrs:{placeholder:"Please input",disabled:!0},model:{value:t.input1,callback:function(s){t.input1=s},expression:"input1"}})],1),s("p",[t._v("Disable the Input with the "),s("code",[t._v("disabled")]),t._v(" attribute.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Please input"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"input1"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":disabled")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"true"')]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n"),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("input1")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v("\n }\n }\n}\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(3),s("p",[t._v("Add an icon to indicate input type.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input placeholder="Pick a date" icon="search" v-model="input2" :on-icon-click="handleIconClick">\n</el-input>\n\n\n',script:"\nexport default {\n data: function() {\n return {\n input2: ''\n }\n },\n methods: {\n handleIconClick: function(ev) {\n console.log(ev);\n }\n }\n}\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-input",{attrs:{placeholder:"Pick a date",icon:"search","on-icon-click":t.handleIconClick},model:{value:t.input2,callback:function(s){t.input2=s},expression:"input2"}})],1),s("p",[t._v("You can add an icon at the end of Input by setting the "),s("code",[t._v("icon")]),t._v(" attribute and use "),s("code",[t._v("on-icon-click")]),t._v(" hook to complete some work after clicking the icon.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Pick a date"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("icon")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"search"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"input2"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":on-icon-click")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleIconClick"')]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n"),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("input2")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v("\n }\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("methods")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("handleIconClick")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("ev")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("console")]),t._v(".log(ev);\n }\n }\n}\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(4),t._m(5),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input type="textarea" :rows="2" placeholder="Please input" v-model="textarea">\n</el-input>\n\n\n',script:"\nexport default {\n data: function() {\n return {\n textarea: ''\n }\n }\n}\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-input",{attrs:{type:"textarea",rows:2,placeholder:"Please input"},model:{value:t.textarea,callback:function(s){t.textarea=s},expression:"textarea"}})],1),s("p",[t._v("Control the height by setting the "),s("code",[t._v("rows")]),t._v(" prop.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("type")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"textarea"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":rows")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"2"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Please input"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"textarea"')]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n"),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("textarea")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v("\n }\n }\n}\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(6),t._m(7),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input type="textarea" autosize placeholder="Please input" v-model="textarea2">\n</el-input>\n<div style="margin: 20px 0;"></div>\n<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="Please input" v-model="textarea3">\n</el-input>\n\n\n',script:"\nexport default {\n data: function() {\n return {\n textarea2: '',\n textarea3: ''\n }\n }\n}\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-input",{attrs:{type:"textarea",autosize:"",placeholder:"Please input"},model:{value:t.textarea2,callback:function(s){t.textarea2=s},expression:"textarea2"}}),s("div",{staticStyle:{margin:"20px 0"}}),s("el-input",{attrs:{type:"textarea",autosize:{minRows:2,maxRows:4},placeholder:"Please input"},model:{value:t.textarea3,callback:function(s){t.textarea3=s},expression:"textarea3"}})],1),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("type")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"textarea"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("autosize")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Please input"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"textarea2"')]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("style")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"margin: 20px 0;"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("type")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"textarea"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":autosize")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"{ minRows: 2, maxRows: 4}"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Please input"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"textarea3"')]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n"),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("textarea2")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("textarea3")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v("\n }\n }\n}\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(8),s("p",[t._v("Prepend or append an element, generally a label or a button.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div>\n <el-input placeholder="Please input" v-model="input3">\n <template slot="prepend">Http://</template>\n </el-input>\n</div>\n<div style="margin-top: 15px;">\n <el-input placeholder="Please input" v-model="input4">\n <template slot="append">.com</template>\n </el-input>\n</div>\n<div style="margin-top: 15px;">\n <el-input placeholder="Please input" v-model="input5">\n <el-select v-model="select" slot="prepend" placeholder="Select">\n <el-option label="Restaurant" value="1"></el-option>\n <el-option label="Order No." value="2"></el-option>\n <el-option label="Tel" value="3"></el-option>\n </el-select>\n <el-button slot="append" icon="search"></el-button>\n </el-input>\n</div>\n\n\n\n',script:"\nexport default {\n data: function() {\n return {\n input3: '',\n input4: '',\n input5: '',\n select: ''\n }\n }\n}\n",style:"\n .el-select .el-input {\n width: 110px;\n }\n"}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("div",[s("el-input",{attrs:{placeholder:"Please input"},model:{value:t.input3,callback:function(s){t.input3=s},expression:"input3"}},[s("template",{slot:"prepend"},[t._v("Http://")])],2)],1),s("div",{staticStyle:{"margin-top":"15px"}},[s("el-input",{attrs:{placeholder:"Please input"},model:{value:t.input4,callback:function(s){t.input4=s},expression:"input4"}},[s("template",{slot:"append"},[t._v(".com")])],2)],1),s("div",{staticStyle:{"margin-top":"15px"}},[s("el-input",{attrs:{placeholder:"Please input"},model:{value:t.input5,callback:function(s){t.input5=s},expression:"input5"}},[s("el-select",{attrs:{slot:"prepend",placeholder:"Select"},slot:"prepend",model:{value:t.select,callback:function(s){t.select=s},expression:"select"}},[s("el-option",{attrs:{label:"Restaurant",value:"1"}}),s("el-option",{attrs:{label:"Order No.",value:"2"}}),s("el-option",{attrs:{label:"Tel",value:"3"}})],1),s("el-button",{attrs:{slot:"append",icon:"search"},slot:"append"})],1)],1)]),s("p",[t._v("Use "),s("code",[t._v("slot")]),t._v(" to distribute elements that prepend or append to Input.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Please input"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"input3"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("slot")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"prepend"')]),t._v(">")]),t._v("Http://"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("style")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"margin-top: 15px;"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Please input"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"input4"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("slot")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"append"')]),t._v(">")]),t._v(".com"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("style")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"margin-top: 15px;"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Please input"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"input5"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-select")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"select"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("slot")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"prepend"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Select"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-option")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Restaurant"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"1"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-option")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-option")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Order No."')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"2"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-option")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-option")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Tel"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"3"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-option")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-select")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("slot")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"append"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("icon")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"search"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("style")]),t._v(">")]),s("span",{attrs:{class:"css"}},[t._v("\n "),s("span",{attrs:{class:"hljs-selector-class"}},[t._v(".el-select")]),t._v(" "),s("span",{attrs:{class:"hljs-selector-class"}},[t._v(".el-input")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("width")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("110px")]),t._v(";\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("style")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n"),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("input3")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("input4")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("input5")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("select")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v("\n }\n }\n}\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(9),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="demo-input-size">\n <el-input size="large" placeholder="Please Input" v-model="input6">\n </el-input>\n <el-input placeholder="Please Input" v-model="input7">\n </el-input>\n <el-input size="small" placeholder="Please Input" v-model="input8">\n </el-input>\n <el-input size="mini" placeholder="Please Input" v-model="input9">\n </el-input>\n</div>\n\n\n',script:"\nexport default {\n data: function() {\n return {\n input6: '',\n input7: '',\n input8: '',\n input9: ''\n }\n }\n}\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("div",{staticClass:"demo-input-size"},[s("el-input",{attrs:{size:"large",placeholder:"Please Input"},model:{value:t.input6,callback:function(s){t.input6=s},expression:"input6"}}),s("el-input",{attrs:{placeholder:"Please Input"},model:{value:t.input7,callback:function(s){t.input7=s},expression:"input7"}}),s("el-input",{attrs:{size:"small",placeholder:"Please Input"},model:{value:t.input8,callback:function(s){t.input8=s},expression:"input8"}}),s("el-input",{attrs:{size:"mini",placeholder:"Please Input"},model:{value:t.input9,callback:function(s){t.input9=s},expression:"input9"}})],1)]),s("p",[t._v("Add "),s("code",[t._v("size")]),t._v(" attribute to change the size of Input. In addition to the default size, there are three other options: "),s("code",[t._v("large")]),t._v(", "),s("code",[t._v("small")]),t._v(" and "),s("code",[t._v("mini")]),t._v(".")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"demo-input-size"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("size")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"large"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Please Input"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"input6"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Please Input"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"input7"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("size")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"small"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Please Input"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"input8"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("size")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"mini"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Please Input"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"input9"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n"),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("input6")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("input7")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("input8")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("input9")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v("\n }\n }\n}\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(10),s("p",[t._v("You can get some recommended tips based on the current input.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row class="demo-autocomplete">\n <el-col :span="12">\n <div class="sub-title">list suggestions when activated</div>\n <el-autocomplete class="inline-input" v-model="state1" :fetch-suggestions="querySearch" placeholder="Please Input" @select="handleSelect"></el-autocomplete>\n </el-col>\n <el-col :span="12">\n <div class="sub-title">list suggestions on input</div>\n <el-autocomplete class="inline-input" v-model="state2" :fetch-suggestions="querySearch" placeholder="Please Input" :trigger-on-focus="false" @select="handleSelect"></el-autocomplete>\n </el-col>\n</el-row>\n\n',script:'\n export default {\n data: function() {\n return {\n links: [],\n state1: \'\',\n state2: \'\'\n };\n },\n methods: {\n querySearch: function(queryString, cb) {\n var links = this.links;\n var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n // call callback function to return suggestions\n cb(results);\n },\n createFilter: function(queryString) {\n return function(link) {\n return (link.value.indexOf(queryString.toLowerCase()) === 0);\n };\n },\n loadAll: function() {\n return [\n { "value": "vue", "link": "https://github.com/vuejs/vue" },\n { "value": "element", "link": "https://github.com/ElemeFE/element" },\n { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n { "value": "babel", "link": "https://github.com/babel/babel" }\n ];\n },\n handleSelect: function(item) {\n console.log(item);\n }\n },\n mounted: function() {\n this.links = this.loadAll();\n }\n }\n',style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-row",{staticClass:"demo-autocomplete"},[s("el-col",{attrs:{span:12}},[s("div",{staticClass:"sub-title"},[t._v("list suggestions when activated")]),s("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":t.querySearch,placeholder:"Please Input"},on:{select:t.handleSelect},model:{value:t.state1,callback:function(s){t.state1=s},expression:"state1"}})],1),s("el-col",{attrs:{span:12}},[s("div",{staticClass:"sub-title"},[t._v("list suggestions on input")]),s("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":t.querySearch,placeholder:"Please Input","trigger-on-focus":!1},on:{select:t.handleSelect},model:{value:t.state2,callback:function(s){t.state2=s},expression:"state2"}})],1)],1)],1),s("p",[t._v("Autocomplete component provides input suggestions. The "),s("code",[t._v("fetch-suggestions")]),t._v(" attribute is a method that returns suggested input. In this example, "),s("code",[t._v("querySearch(queryString, cb)")]),t._v(" returns suggestions to Autocomplete via "),s("code",[t._v("cb(data)")]),t._v(" when suggestions are ready.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-row")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"demo-autocomplete"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-col")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":span")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"12"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"sub-title"')]),t._v(">")]),t._v("list suggestions when activated"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-autocomplete")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"inline-input"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"state1"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":fetch-suggestions")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"querySearch"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Please Input"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@select")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleSelect"')]),t._v("\n >")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-autocomplete")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-col")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-col")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":span")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"12"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"sub-title"')]),t._v(">")]),t._v("list suggestions on input"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-autocomplete")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"inline-input"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"state2"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":fetch-suggestions")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"querySearch"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Please Input"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":trigger-on-focus")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"false"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@select")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleSelect"')]),t._v("\n >")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-autocomplete")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-col")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-row")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("links")]),t._v(": [],\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("state1")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("state2")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v("\n };\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("methods")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("querySearch")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("queryString, cb")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" links = "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".links;\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" results = queryString ? links.filter("),s("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".createFilter(queryString)) : links;\n "),s("span",{attrs:{class:"hljs-comment"}},[t._v("// call callback function to return suggestions")]),t._v("\n cb(results);\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("createFilter")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("queryString")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("link")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" (link.value.indexOf(queryString.toLowerCase()) === "),s("span",{attrs:{class:"hljs-number"}},[t._v("0")]),t._v(");\n };\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("loadAll")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" [\n { "),s("span",{attrs:{class:"hljs-string"}},[t._v('"value"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"vue"')]),t._v(", "),s("span",{attrs:{class:"hljs-string"}},[t._v('"link"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"https://github.com/vuejs/vue"')]),t._v(" },\n { "),s("span",{attrs:{class:"hljs-string"}},[t._v('"value"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"element"')]),t._v(", "),s("span",{attrs:{class:"hljs-string"}},[t._v('"link"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"https://github.com/ElemeFE/element"')]),t._v(" },\n { "),s("span",{attrs:{class:"hljs-string"}},[t._v('"value"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"cooking"')]),t._v(", "),s("span",{attrs:{class:"hljs-string"}},[t._v('"link"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"https://github.com/ElemeFE/cooking"')]),t._v(" },\n { "),s("span",{attrs:{class:"hljs-string"}},[t._v('"value"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"mint-ui"')]),t._v(", "),s("span",{attrs:{class:"hljs-string"}},[t._v('"link"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"https://github.com/ElemeFE/mint-ui"')]),t._v(" },\n { "),s("span",{attrs:{class:"hljs-string"}},[t._v('"value"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"vuex"')]),t._v(", "),s("span",{attrs:{class:"hljs-string"}},[t._v('"link"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"https://github.com/vuejs/vuex"')]),t._v(" },\n { "),s("span",{attrs:{class:"hljs-string"}},[t._v('"value"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"vue-router"')]),t._v(", "),s("span",{attrs:{class:"hljs-string"}},[t._v('"link"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"https://github.com/vuejs/vue-router"')]),t._v(" },\n { "),s("span",{attrs:{class:"hljs-string"}},[t._v('"value"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"babel"')]),t._v(", "),s("span",{attrs:{class:"hljs-string"}},[t._v('"link"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"https://github.com/babel/babel"')]),t._v(" }\n ];\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("handleSelect")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("item")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("console")]),t._v(".log(item);\n }\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("mounted")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".links = "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".loadAll();\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(11),s("p",[t._v("Customize how suggestions are displayed.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-autocomplete popper-class="my-autocomplete" v-model="state3" :fetch-suggestions="querySearch" custom-item="my-item-en" placeholder="Please input" @select="handleSelect" icon="edit" :on-icon-click="handleIconClick"></el-autocomplete>\n\n\n\n\n',script:'\n Vue.component(\'my-item-en\', {\n functional: true,\n render: function (h, ctx) {\n var item = ctx.props.item;\n return h(\'li\', ctx.data, [\n h(\'div\', { attrs: { class: \'value\' } }, [item.value]),\n h(\'span\', { attrs: { class: \'link\' } }, [item.link])\n ]);\n },\n props: {\n item: { type: Object, required: true }\n }\n });\n export default {\n data: function() {\n return {\n links: [],\n state3: \'\'\n };\n },\n methods: {\n querySearch: function(queryString, cb) {\n var links = this.links;\n var results = queryString ? link.filter(this.createFilter(queryString)) : links;\n // call callback function to return recommended data\n cb(results);\n },\n createFilter: function(queryString) {\n return function(link) {\n return (link.value.indexOf(queryString.toLowerCase()) === 0);\n };\n },\n loadAll: function() {\n return [\n { "value": "vue", "link": "https://github.com/vuejs/vue" },\n { "value": "element", "link": "https://github.com/ElemeFE/element" },\n { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n { "value": "babel", "link": "https://github.com/babel/babel" }\n ];\n },\n handleSelect: function(item) {\n console.log(item);\n },\n handleIconClick: function(ev) {\n console.log(ev);\n }\n },\n mounted: function() {\n this.links = this.loadAll();\n }\n }\n',style:"\n .my-autocomplete {\n li {\n line-height: normal;\n padding: 7px;\n\n .value {\n text-overflow: ellipsis;\n overflow: hidden;\n }\n .link {\n font-size: 12px;\n color: #b4b4b4;\n }\n }\n }\n"}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-autocomplete",{attrs:{"popper-class":"my-autocomplete","fetch-suggestions":t.querySearch,"custom-item":"my-item-en",placeholder:"Please input",icon:"edit","on-icon-click":t.handleIconClick},on:{select:t.handleSelect},model:{value:t.state3,callback:function(s){t.state3=s},expression:"state3"}})],1),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-autocomplete")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("popper-class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"my-autocomplete"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"state3"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":fetch-suggestions")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"querySearch"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("custom-item")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"my-item-en"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Please input"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@select")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleSelect"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("icon")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"edit"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":on-icon-click")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleIconClick"')]),t._v("\n>")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-autocomplete")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("style")]),t._v(">")]),t._v("\n .my-autocomplete {\n li {\n line-height: normal;\n padding: 7px;\n\n .value {\n text-overflow: ellipsis;\n overflow: hidden;\n }\n .link {\n font-size: 12px;\n color: #b4b4b4;\n }\n }\n }\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("style")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n Vue.component("),s("span",{attrs:{class:"hljs-string"}},[t._v("'my-item-en'")]),t._v(", {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("functional")]),t._v(": "),s("span",{attrs:{class:"hljs-literal"}},[t._v("true")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("render")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v(" ("),s("span",{attrs:{class:"hljs-params"}},[t._v("h, ctx")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" item = ctx.props.item;\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" h("),s("span",{attrs:{class:"hljs-string"}},[t._v("'li'")]),t._v(", ctx.data, [\n h("),s("span",{attrs:{class:"hljs-string"}},[t._v("'div'")]),t._v(", { "),s("span",{attrs:{class:"hljs-attr"}},[t._v("attrs")]),t._v(": { "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'value'")]),t._v(" } }, [item.value]),\n h("),s("span",{attrs:{class:"hljs-string"}},[t._v("'span'")]),t._v(", { "),s("span",{attrs:{class:"hljs-attr"}},[t._v("attrs")]),t._v(": { "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'link'")]),t._v(" } }, [item.link])\n ]);\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("props")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("item")]),t._v(": { "),s("span",{attrs:{class:"hljs-attr"}},[t._v("type")]),t._v(": "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("Object")]),t._v(", "),s("span",{attrs:{class:"hljs-attr"}},[t._v("required")]),t._v(": "),s("span",{attrs:{class:"hljs-literal"}},[t._v("true")]),t._v(" }\n }\n });\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("links")]),t._v(": [],\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("state3")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v("\n };\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("methods")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("querySearch")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("queryString, cb")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" links = "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".links;\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" results = queryString ? link.filter("),s("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".createFilter(queryString)) : links;\n "),s("span",{attrs:{class:"hljs-comment"}},[t._v("// call callback function to return recommended data")]),t._v("\n cb(results);\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("createFilter")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("queryString")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("link")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" (link.value.indexOf(queryString.toLowerCase()) === "),s("span",{attrs:{class:"hljs-number"}},[t._v("0")]),t._v(");\n };\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("loadAll")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" [\n { "),s("span",{attrs:{class:"hljs-string"}},[t._v('"value"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"vue"')]),t._v(", "),s("span",{attrs:{class:"hljs-string"}},[t._v('"link"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"https://github.com/vuejs/vue"')]),t._v(" },\n { "),s("span",{attrs:{class:"hljs-string"}},[t._v('"value"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"element"')]),t._v(", "),s("span",{attrs:{class:"hljs-string"}},[t._v('"link"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"https://github.com/ElemeFE/element"')]),t._v(" },\n { "),s("span",{attrs:{class:"hljs-string"}},[t._v('"value"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"cooking"')]),t._v(", "),s("span",{attrs:{class:"hljs-string"}},[t._v('"link"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"https://github.com/ElemeFE/cooking"')]),t._v(" },\n { "),s("span",{attrs:{class:"hljs-string"}},[t._v('"value"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"mint-ui"')]),t._v(", "),s("span",{attrs:{class:"hljs-string"}},[t._v('"link"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"https://github.com/ElemeFE/mint-ui"')]),t._v(" },\n { "),s("span",{attrs:{class:"hljs-string"}},[t._v('"value"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"vuex"')]),t._v(", "),s("span",{attrs:{class:"hljs-string"}},[t._v('"link"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"https://github.com/vuejs/vuex"')]),t._v(" },\n { "),s("span",{attrs:{class:"hljs-string"}},[t._v('"value"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"vue-router"')]),t._v(", "),s("span",{attrs:{class:"hljs-string"}},[t._v('"link"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"https://github.com/vuejs/vue-router"')]),t._v(" },\n { "),s("span",{attrs:{class:"hljs-string"}},[t._v('"value"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"babel"')]),t._v(", "),s("span",{attrs:{class:"hljs-string"}},[t._v('"link"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"https://github.com/babel/babel"')]),t._v(" }\n ];\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("handleSelect")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("item")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("console")]),t._v(".log(item);\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("handleIconClick")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("ev")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("console")]),t._v(".log(ev);\n }\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("mounted")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".links = "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".loadAll();\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(12),s("p",[t._v("Search data from server-side.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-autocomplete v-model="state4" :fetch-suggestions="querySearchAsync" placeholder="Please input" @select="handleSelect"></el-autocomplete>\n\n',script:'\n export default {\n data: function() {\n return {\n links: [],\n state4: \'\',\n timeout: null\n };\n },\n methods: {\n loadAll: function() {\n return [\n { "value": "vue", "link": "https://github.com/vuejs/vue" },\n { "value": "element", "link": "https://github.com/ElemeFE/element" },\n { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n { "value": "babel", "link": "https://github.com/babel/babel" }\n ];\n },\n querySearchAsync: function(queryString, cb) {\n var links = this.links;\n var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n\n clearTimeout(this.timeout);\n this.timeout = setTimeout(function() {\n cb(results);\n }, 3000 * Math.random());\n },\n createFilter: function(queryString) {\n return function(link) {\n return (link.value.indexOf(queryString.toLowerCase()) === 0);\n };\n },\n handleSelect: function(item) {\n console.log(item);\n }\n },\n mounted: function() {\n this.links = this.loadAll();\n }\n };\n',style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-autocomplete",{attrs:{"fetch-suggestions":t.querySearchAsync,placeholder:"Please input"},on:{select:t.handleSelect},model:{value:t.state4,callback:function(s){t.state4=s},expression:"state4"}})],1),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-autocomplete")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"state4"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":fetch-suggestions")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"querySearchAsync"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Please input"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@select")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleSelect"')]),t._v("\n>")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-autocomplete")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("links")]),t._v(": [],\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("state4")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("timeout")]),t._v(": "),s("span",{attrs:{class:"hljs-literal"}},[t._v("null")]),t._v("\n };\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("methods")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("loadAll")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" [\n { "),s("span",{attrs:{class:"hljs-string"}},[t._v('"value"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"vue"')]),t._v(", "),s("span",{attrs:{class:"hljs-string"}},[t._v('"link"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"https://github.com/vuejs/vue"')]),t._v(" },\n { "),s("span",{attrs:{class:"hljs-string"}},[t._v('"value"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"element"')]),t._v(", "),s("span",{attrs:{class:"hljs-string"}},[t._v('"link"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"https://github.com/ElemeFE/element"')]),t._v(" },\n { "),s("span",{attrs:{class:"hljs-string"}},[t._v('"value"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"cooking"')]),t._v(", "),s("span",{attrs:{class:"hljs-string"}},[t._v('"link"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"https://github.com/ElemeFE/cooking"')]),t._v(" },\n { "),s("span",{attrs:{class:"hljs-string"}},[t._v('"value"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"mint-ui"')]),t._v(", "),s("span",{attrs:{class:"hljs-string"}},[t._v('"link"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"https://github.com/ElemeFE/mint-ui"')]),t._v(" },\n { "),s("span",{attrs:{class:"hljs-string"}},[t._v('"value"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"vuex"')]),t._v(", "),s("span",{attrs:{class:"hljs-string"}},[t._v('"link"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"https://github.com/vuejs/vuex"')]),t._v(" },\n { "),s("span",{attrs:{class:"hljs-string"}},[t._v('"value"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"vue-router"')]),t._v(", "),s("span",{attrs:{class:"hljs-string"}},[t._v('"link"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"https://github.com/vuejs/vue-router"')]),t._v(" },\n { "),s("span",{attrs:{class:"hljs-string"}},[t._v('"value"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"babel"')]),t._v(", "),s("span",{attrs:{class:"hljs-string"}},[t._v('"link"')]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v('"https://github.com/babel/babel"')]),t._v(" }\n ];\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("querySearchAsync")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("queryString, cb")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" links = "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".links;\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" results = queryString ? links.filter("),s("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".createFilter(queryString)) : links;\n\n clearTimeout("),s("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".timeout);\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".timeout = setTimeout("),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n cb(results);\n }, "),s("span",{attrs:{class:"hljs-number"}},[t._v("3000")]),t._v(" * "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("Math")]),t._v(".random());\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("createFilter")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("queryString")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("link")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" (link.value.indexOf(queryString.toLowerCase()) === "),s("span",{attrs:{class:"hljs-number"}},[t._v("0")]),t._v(");\n };\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("handleSelect")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("item")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("console")]),t._v(".log(item);\n }\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("mounted")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".links = "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".loadAll();\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(13),t._m(14),t._m(15),t._m(16),t._m(17),t._m(18),t._m(19),t._m(20),t._m(21),t._m(22)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"input"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"basic-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"disabled"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"input-with-icon"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#input-with-icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input with icon")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"textarea"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#textarea","aria-hidden":"true"}},[this._v("¶")]),this._v(" Textarea")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[s._v("Resizable for entering multiple lines of text information. Add attribute "),t("code",{pre:!0},[s._v('type="textarea"')]),s._v(" to change "),t("code",{pre:!0},[s._v("input")]),s._v(" into native "),t("code",{pre:!0},[s._v("textarea")]),s._v(".")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"autosize-textarea"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#autosize-textarea","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autosize Textarea")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[s._v("Setting the "),t("code",{pre:!0},[s._v("autosize")]),s._v(" prop for a textarea type of Input makes the height to automatically adjust based on the content. An options object can be provided to "),t("code",{pre:!0},[s._v("autosize")]),s._v(" to specify the minimum and maximum number of lines the textarea can automatically adjust.")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"mixed-input"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mixed-input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mixed input")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"sizes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sizes")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"autocomplete"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"custom-template"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#custom-template","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom template")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"remote-search"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#remote-search","aria-hidden":"true"}},[this._v("¶")]),this._v(" Remote search")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"input-attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#input-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("type")]),t("td",[s._v("Same as the "),t("code",{pre:!0},[s._v("type")]),s._v(" attribute of native input, except that it can be "),t("code",{pre:!0},[s._v("textarea")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("text")])]),t("tr",[t("td",[s._v("value")]),t("td",[s._v("binding value")]),t("td",[s._v("string/number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("maxlength")]),t("td",[s._v("maximum Input text length")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("minlength")]),t("td",[s._v("minimum Input text length")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("placeholder")]),t("td",[s._v("placeholder of Input")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("whether Input is disabled")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("size of Input, works when "),t("code",{pre:!0},[s._v("type")]),s._v(" is not 'textarea'")]),t("td",[s._v("string")]),t("td",[s._v("large/small/mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("icon")]),t("td",[s._v("icon name")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("rows")]),t("td",[s._v("number of rows of textarea, only works when "),t("code",{pre:!0},[s._v("type")]),s._v(" is 'textarea'")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("2")])]),t("tr",[t("td",[s._v("autosize")]),t("td",[s._v("whether textarea has an adaptive height, only works when "),t("code",{pre:!0},[s._v("type")]),s._v(" is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 }")]),t("td",[s._v("boolean/object")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("auto-complete")]),t("td",[s._v("same as "),t("code",{pre:!0},[s._v("auto-complete")]),s._v(" in native input")]),t("td",[s._v("string")]),t("td",[s._v("on/off")]),t("td",[s._v("off")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("same as "),t("code",{pre:!0},[s._v("name")]),s._v(" in native input")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("readonly")]),t("td",[s._v("same as "),t("code",{pre:!0},[s._v("readonly")]),s._v(" in native input")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("max")]),t("td",[s._v("same as "),t("code",{pre:!0},[s._v("max")]),s._v(" in native input")]),t("td",[s._v("—")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("min")]),t("td",[s._v("same as "),t("code",{pre:!0},[s._v("min")]),s._v(" in native input")]),t("td",[s._v("—")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("step")]),t("td",[s._v("same as "),t("code",{pre:!0},[s._v("step")]),s._v(" in native input")]),t("td",[s._v("—")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("resize")]),t("td",[s._v("control the resizability")]),t("td",[s._v("string")]),t("td",[s._v("none, both, horizontal, vertical")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("autofocus")]),t("td",[s._v("same as "),t("code",{pre:!0},[s._v("autofocus")]),s._v(" in native input")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("form")]),t("td",[s._v("same as "),t("code",{pre:!0},[s._v("form")]),s._v(" in native input")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("on-icon-click")]),t("td",[s._v("hook function when clicking on the input icon")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"input-events"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#input-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input Events")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Event Name")]),t("th",[s._v("Description")]),t("th",[s._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[s._v("click")]),t("td",[s._v("triggers when the icon inside Input is clicked")]),t("td",[s._v("(event: Event)")])]),t("tr",[t("td",[s._v("blur")]),t("td",[s._v("triggers when the icon inside Input is blur")]),t("td",[s._v("(event: Event)")])]),t("tr",[t("td",[s._v("focus")]),t("td",[s._v("triggers when the icon inside Input is focus")]),t("td",[s._v("(event: Event)")])]),t("tr",[t("td",[s._v("change")]),t("td",[s._v("triggers when the icon inside Input value change")]),t("td",[s._v("(value: string | number)")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"autocomplete-attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Options")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("placeholder")]),t("td",[s._v("the placeholder of Autocomplete")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("whether Autocomplete is disabled")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("props")]),t("td",[s._v("configuration options, see the following table")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("icon")]),t("td",[s._v("icon name")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("value")]),t("td",[s._v("binding value")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("custom-item")]),t("td",[s._v("component name of your customized suggestion list item")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("fetch-suggestions")]),t("td",[s._v("a method to fetch input suggestions. When suggestions are ready, invoke "),t("code",{pre:!0},[s._v("callback(data:[])")]),s._v(" to return them to Autocomplete")]),t("td",[s._v("Function(queryString, callback)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("popper-class")]),t("td",[s._v("custom class name for autocomplete's dropdown")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("trigger-on-focus")]),t("td",[s._v("whether show suggestions when input focus")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("on-icon-click")]),t("td",[s._v("hook function when clicking on the input icon")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("select-when-unmatched")]),t("td",[s._v("whether to emit a "),t("code",{pre:!0},[s._v("select")]),s._v(" event on enter when there is no autocomplete match")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"props"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._v(" props")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("label")]),t("td",[s._v("specify which key of option object is used as the option's label")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("value")])]),t("tr",[t("td",[s._v("value")]),t("td",[s._v("specify which key of option object is used as the option's value")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("value")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"autocomplete-events"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Events")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Event Name")]),t("th",[s._v("Description")]),t("th",[s._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[s._v("select")]),t("td",[s._v("triggers when a suggestion is clicked")]),t("td",[s._v("suggestion being clicked")])])])])}],!1,null,null,null);t.default=a.exports},858:function(s,t,a){"use strict";a.r(t);var l={data:function(){return{tableData:[{date:"2016-05-02",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"}],loading:!0,loading2:!0,fullscreenLoading:!1}},methods:{openFullScreen:function(){var s=this;s.fullscreenLoading=!0,setTimeout(function(){s.fullscreenLoading=!1},3e3)}}},a=(a(744),a(0)),a=Object(a.a)(l,function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("section",[s._m(0),t("p",[s._v("Show animation while loading data.")]),s._m(1),t("p",[s._v("Displays animation in a container (such as a table) while loading data.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table v-loading.body="loading" :data="tableData" style="width: 100%">\n <el-table-column prop="date" label="Date" width="180">\n </el-table-column>\n <el-table-column prop="name" label="Name" width="180">\n </el-table-column>\n <el-table-column prop="address" label="Address">\n </el-table-column>\n </el-table>\n</template>\n\n\n\n\n',script:"\n export default {\n data: function() {\n return {\n tableData: [{\n date: '2016-05-02',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-04',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-01',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }],\n loading: true\n };\n }\n };\n",style:"\n body {\n margin: 0;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{directives:[{name:"loading",rawName:"v-loading.body",value:s.loading,expression:"loading",modifiers:{body:!0}}],staticStyle:{width:"100%"},attrs:{data:s.tableData}},[t("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),t("p",[s._v("YufpWP provides two ways to invoke Loading: directive and service. For the custom directive "),t("code",[s._v("v-loading")]),s._v(", you just need to bind a "),t("code",[s._v("boolean")]),s._v(" value to it. By default, the loading mask will append to the element where the directive is used. Adding the "),t("code",[s._v("body")]),s._v(" modifier makes the mask append to the body element.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-loading.body")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"loading"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"css"}},[s._v("\n "),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("body")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}}),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("loading")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n };\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("You can customize a text message.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table v-loading="loading2" element-loading-text="Loading..." :data="tableData" style="width: 100%">\n <el-table-column prop="date" label="Date" width="180">\n </el-table-column>\n <el-table-column prop="name" label="Name" width="180">\n </el-table-column>\n <el-table-column prop="address" label="Address">\n </el-table-column>\n </el-table>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n return {\n tableData: [{\n date: '2016-05-02',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-04',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-01',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }],\n loading2: true\n };\n }\n };\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-table",{directives:[{name:"loading",rawName:"v-loading",value:s.loading2,expression:"loading2"}],staticStyle:{width:"100%"},attrs:{"element-loading-text":"Loading...",data:s.tableData}},[t("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),t("p",[s._v("Add attribute "),t("code",[s._v("element-loading-text")]),s._v(" to the element on which "),t("code",[s._v("v-loading")]),s._v(" is bound, and its value will be displayed under the spinner.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-loading")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"loading2"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("element-loading-text")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Loading..."')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}}),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("loading2")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n };\n }\n };\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Show a full screen animation while loading data.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-button type="primary" @click="openFullScreen" v-loading.fullscreen.lock="fullscreenLoading">\n Full screen loading for 3 seconds\n </el-button>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n return {\n fullscreenLoading: false\n }\n },\n methods: {\n openFullScreen: function() {\n var _this = this;\n _this.fullscreenLoading = true;\n setTimeout(function() {\n _this.fullscreenLoading = false;\n }, 3000);\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{directives:[{name:"loading",rawName:"v-loading.fullscreen.lock",value:s.fullscreenLoading,expression:"fullscreenLoading",modifiers:{fullscreen:!0,lock:!0}}],attrs:{type:"primary"},on:{click:s.openFullScreen}},[s._v("\n Full screen loading for 3 seconds\n ")])]],2),t("p",[s._v("Add the "),t("code",[s._v("fullscreen")]),s._v(" modifier to create a full screen mask, and it will append to body. In this case, if you disable scrolling on body, you add another modifier "),t("code",[s._v("lock")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"openFullScreen"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-loading.fullscreen.lock")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"fullscreenLoading"')]),s._v(">")]),s._v("\n Full screen loading for 3 seconds\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}}),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("fullscreenLoading")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n }\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("openFullScreen")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}}),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" _this = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(";\n _this.fullscreenLoading = "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n setTimeout("),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}}),s._v(") ")]),s._v("{\n _this.fullscreenLoading = "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n }, "),t("span",{attrs:{class:"hljs-number"}},[s._v("3000")]),s._v(");\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("You can also invoke Loading with a service. Import Loading service:")]),s._m(5),t("p",[s._v("Invoke it:")]),s._m(6),s._m(7),s._m(8),t("p",[s._v("Note that in this case the full screen Loading is singleton. If a new full screen Loading is invoked before an existing one is closed, the existing full screen Loading instance will be returned instead of actually creating another Loading instance:")]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"loading"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#loading","aria-hidden":"true"}},[this._v("¶")]),this._v(" Loading")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"loading-inside-a-container"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#loading-inside-a-container","aria-hidden":"true"}},[this._v("¶")]),this._v(" Loading inside a container")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"loading-text"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#loading-text","aria-hidden":"true"}},[this._v("¶")]),this._v(" Loading text")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"full-screen-loading"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#full-screen-loading","aria-hidden":"true"}},[this._v("¶")]),this._v(" Full screen loading")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"service"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#service","aria-hidden":"true"}},[this._v("¶")]),this._v(" Service")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-javascript"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Loading } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'yuwp-ui'")]),s._v(";\n")])])},function(){var s=this.$createElement,s=this._self._c||s;return s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-javascript"}},[this._v("Loading.service(options);\n")])])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[s._v("The parameter "),t("code",{pre:!0},[s._v("options")]),s._v(" is the configuration of Loading, and its details can be found in the following table. "),t("code",{pre:!0},[s._v("LoadingService")]),s._v(" returns a Loading instance, and you can close it by invoking its "),t("code",{pre:!0},[s._v("close")]),s._v(" method:")])},function(){var s=this.$createElement,s=this._self._c||s;return s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-javascript"}},[s("span",{attrs:{class:"hljs-keyword"}},[this._v("var")]),this._v(" loadingInstance = Loading.service(options);\nloadingInstance.close();\n")])])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-javascript"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" loadingInstance1 = Loading.service({ "),t("span",{attrs:{class:"hljs-attr"}},[s._v("fullscreen")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(" });\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" loadingInstance2 = Loading.service({ "),t("span",{attrs:{class:"hljs-attr"}},[s._v("fullscreen")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(" });\n"),t("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(loadingInstance1 === loadingInstance2); "),t("span",{attrs:{class:"hljs-comment"}},[s._v("// true")]),s._v("\n")])])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[s._v("Calling the "),t("code",{pre:!0},[s._v("close")]),s._v(" method on any one of them can close this full screen Loading.")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[s._v("If YufpWP is imported entirely, a globally method "),t("code",{pre:!0},[s._v("$loading")]),s._v(" will be registered to Vue.prototype. You can invoke it like this: "),t("code",{pre:!0},[s._v("this.$loading(options)")]),s._v(", and it also returns a Loading instance.")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"options"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("target")]),t("td",[s._v("the DOM node Loading needs to cover. Accepts a DOM object or a string. If it's a string, it will be passed to "),t("code",{pre:!0},[s._v("document.querySelector")]),s._v(" to get the corresponding DOM node")]),t("td",[s._v("object/string")]),t("td",[s._v("—")]),t("td",[s._v("document.body")])]),t("tr",[t("td",[s._v("body")]),t("td",[s._v("same as the "),t("code",{pre:!0},[s._v("body")]),s._v(" modifier of "),t("code",{pre:!0},[s._v("v-loading")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("fullscreen")]),t("td",[s._v("same as the "),t("code",{pre:!0},[s._v("fullscreen")]),s._v(" modifier of "),t("code",{pre:!0},[s._v("v-loading")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("lock")]),t("td",[s._v("same as the "),t("code",{pre:!0},[s._v("lock")]),s._v(" modifier of "),t("code",{pre:!0},[s._v("v-loading")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("text")]),t("td",[s._v("loading text that displays under the spinner")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("customClass")]),t("td",[s._v("custom class name for Loading")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])}],!1,null,null,null);t.default=a.exports},859:function(s,t,a){"use strict";a.r(t);var l={data:function(){return{activeIndex:"1",activeIndex2:"1",isCollapse:!0}},methods:{handleOpen:function(s,t){console.log(s,t)},handleClose:function(s,t){console.log(s,t)},handleSelect:function(s,t){console.log(s,t)}}},a=(a(745),a(0)),a=Object(a.a)(l,function(){var t=this,s=t.$createElement,s=t._self._c||s;return s("section",[t._m(0),s("p",[t._v("Menu that provides navigation for your website.")]),t._m(1),s("p",[t._v("Top bar NavMenu can be used in a variety of scenarios.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-menu theme="dark" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">\n <el-menu-item index="1">Processing Center</el-menu-item>\n <el-submenu index="2">\n <template slot="title">Workspace</template>\n <el-menu-item index="2-1">item one</el-menu-item>\n <el-menu-item index="2-2">item two</el-menu-item>\n <el-menu-item index="2-3">item three</el-menu-item>\n </el-submenu>\n <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>\n</el-menu>\n<div class="line"></div>\n<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect">\n <el-menu-item index="1">Processing Center</el-menu-item>\n <el-submenu index="2">\n <template slot="title">Workspace</template>\n <el-menu-item index="2-1">item one</el-menu-item>\n <el-menu-item index="2-2">item two</el-menu-item>\n <el-menu-item index="2-3">item three</el-menu-item>\n </el-submenu>\n <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>\n</el-menu>\n\n\n',script:"\n export default {\n data: function() {\n return {\n activeIndex: '1',\n activeIndex2: '1'\n };\n },\n methods: {\n handleSelect: function(key, keyPath) {\n console.log(key, keyPath);\n }\n }\n }\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-menu",{staticClass:"el-menu-demo",attrs:{theme:"dark","default-active":t.activeIndex,mode:"horizontal"},on:{select:t.handleSelect}},[s("el-menu-item",{attrs:{index:"1"}},[t._v("Processing Center")]),s("el-submenu",{attrs:{index:"2"}},[s("template",{slot:"title"},[t._v("Workspace")]),s("el-menu-item",{attrs:{index:"2-1"}},[t._v("item one")]),s("el-menu-item",{attrs:{index:"2-2"}},[t._v("item two")]),s("el-menu-item",{attrs:{index:"2-3"}},[t._v("item three")])],2),s("el-menu-item",{attrs:{index:"3"}},[s("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[t._v("Orders")])])],1),s("div",{staticClass:"line"}),s("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":t.activeIndex2,mode:"horizontal"},on:{select:t.handleSelect}},[s("el-menu-item",{attrs:{index:"1"}},[t._v("Processing Center")]),s("el-submenu",{attrs:{index:"2"}},[s("template",{slot:"title"},[t._v("Workspace")]),s("el-menu-item",{attrs:{index:"2-1"}},[t._v("item one")]),s("el-menu-item",{attrs:{index:"2-2"}},[t._v("item two")]),s("el-menu-item",{attrs:{index:"2-3"}},[t._v("item three")])],2),s("el-menu-item",{attrs:{index:"3"}},[s("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[t._v("Orders")])])],1)],1),s("p",[t._v("By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the submenu component to create a second level menu.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("theme")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"dark"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":default-active")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"activeIndex"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"el-menu-demo"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("mode")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"horizontal"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@select")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleSelect"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"1"')]),t._v(">")]),t._v("Processing Center"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-submenu")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"2"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("slot")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"title"')]),t._v(">")]),t._v("Workspace"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"2-1"')]),t._v(">")]),t._v("item one"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"2-2"')]),t._v(">")]),t._v("item two"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"2-3"')]),t._v(">")]),t._v("item three"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-submenu")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"3"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("a")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("href")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"https://www.ele.me"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("target")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"_blank"')]),t._v(">")]),t._v("Orders"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("a")]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"line"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":default-active")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"activeIndex2"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"el-menu-demo"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("mode")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"horizontal"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@select")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleSelect"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"1"')]),t._v(">")]),t._v("Processing Center"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-submenu")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"2"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("slot")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"title"')]),t._v(">")]),t._v("Workspace"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"2-1"')]),t._v(">")]),t._v("item one"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"2-2"')]),t._v(">")]),t._v("item two"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"2-3"')]),t._v(">")]),t._v("item three"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-submenu")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"3"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("a")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("href")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"https://www.ele.me"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("target")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"_blank"')]),t._v(">")]),t._v("Orders"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("a")]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("activeIndex")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'1'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("activeIndex2")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'1'")]),t._v("\n };\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("methods")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("handleSelect")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("key, keyPath")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("console")]),t._v(".log(key, keyPath);\n }\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(2),s("p",[t._v("Vertical NavMenu with sub-menus.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row class="tac">\n <el-col :span="8">\n <h5>With icons</h5>\n <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">\n <el-submenu index="1">\n <template slot="title"><i class="el-icon-message"></i>Navigator One</template>\n <el-menu-item-group title="Group One">\n <el-menu-item index="1-1">item one</el-menu-item>\n <el-menu-item index="1-2">item one</el-menu-item>\n </el-menu-item-group>\n <el-menu-item-group title="Group Two">\n <el-menu-item index="1-3">item three</el-menu-item>\n </el-menu-item-group>\n <el-submenu index="1-4">\n <template slot="title">item four</template>\n <el-menu-item index="1-4-1">item one</el-menu-item>\n </el-submenu>\n </el-submenu>\n <el-menu-item index="2"><i class="el-icon-menu"></i>Navigator Two</el-menu-item>\n <el-menu-item index="3"><i class="el-icon-setting"></i>Navigator Three</el-menu-item>\n </el-menu>\n </el-col>\n <el-col :span="8">\n <h5>Without icons</h5>\n <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark">\n <el-submenu index="1">\n <template slot="title">Navigator One</template>\n <el-menu-item-group title="Group One">\n <el-menu-item index="1-1">item one</el-menu-item>\n <el-menu-item index="1-2">item two</el-menu-item>\n </el-menu-item-group>\n <el-menu-item-group title="Group Two">\n <el-menu-item index="1-3">item three</el-menu-item>\n </el-menu-item-group>\n <el-submenu index="1-4">\n <template slot="title">item four</template>\n <el-menu-item index="1-4-1">item one</el-menu-item>\n </el-submenu>\n </el-submenu>\n <el-menu-item index="2">Navigator Two</el-menu-item>\n <el-menu-item index="3">Navigator Three</el-menu-item>\n </el-menu>\n </el-col>\n <el-col :span="8">\n <h5>Groups</h5>\n <el-menu mode="vertical" default-active="1" class="el-menu-vertical-demo">\n <el-menu-item-group title="Group One">\n <el-menu-item index="1"><i class="el-icon-message"></i>Navigator One</el-menu-item>\n <el-menu-item index="2"><i class="el-icon-message"></i>Navigator Two</el-menu-item>\n </el-menu-item-group>\n <el-menu-item-group title="Group Two">\n <el-menu-item index="3"><i class="el-icon-message"></i>Navigator Three</el-menu-item>\n <el-menu-item index="4"><i class="el-icon-message"></i>Navigator Four</el-menu-item>\n </el-menu-item-group>\n </el-menu>\n </el-col>\n</el-row>\n\n\n',script:"\n export default {\n methods: {\n handleOpen: function(key, keyPath) {\n console.log(key, keyPath);\n },\n handleClose: function(key, keyPath) {\n console.log(key, keyPath);\n }\n }\n }\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-row",{staticClass:"tac"},[s("el-col",{attrs:{span:8}},[s("h5",[t._v("With icons")]),s("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2"},on:{open:t.handleOpen,close:t.handleClose}},[s("el-submenu",{attrs:{index:"1"}},[s("template",{slot:"title"},[s("i",{staticClass:"el-icon-message"}),t._v("Navigator One")]),s("el-menu-item-group",{attrs:{title:"Group One"}},[s("el-menu-item",{attrs:{index:"1-1"}},[t._v("item one")]),s("el-menu-item",{attrs:{index:"1-2"}},[t._v("item one")])],1),s("el-menu-item-group",{attrs:{title:"Group Two"}},[s("el-menu-item",{attrs:{index:"1-3"}},[t._v("item three")])],1),s("el-submenu",{attrs:{index:"1-4"}},[s("template",{slot:"title"},[t._v("item four")]),s("el-menu-item",{attrs:{index:"1-4-1"}},[t._v("item one")])],2)],2),s("el-menu-item",{attrs:{index:"2"}},[s("i",{staticClass:"el-icon-menu"}),t._v("Navigator Two")]),s("el-menu-item",{attrs:{index:"3"}},[s("i",{staticClass:"el-icon-setting"}),t._v("Navigator Three")])],1)],1),s("el-col",{attrs:{span:8}},[s("h5",[t._v("Without icons")]),s("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2",theme:"dark"},on:{open:t.handleOpen,close:t.handleClose}},[s("el-submenu",{attrs:{index:"1"}},[s("template",{slot:"title"},[t._v("Navigator One")]),s("el-menu-item-group",{attrs:{title:"Group One"}},[s("el-menu-item",{attrs:{index:"1-1"}},[t._v("item one")]),s("el-menu-item",{attrs:{index:"1-2"}},[t._v("item two")])],1),s("el-menu-item-group",{attrs:{title:"Group Two"}},[s("el-menu-item",{attrs:{index:"1-3"}},[t._v("item three")])],1),s("el-submenu",{attrs:{index:"1-4"}},[s("template",{slot:"title"},[t._v("item four")]),s("el-menu-item",{attrs:{index:"1-4-1"}},[t._v("item one")])],2)],2),s("el-menu-item",{attrs:{index:"2"}},[t._v("Navigator Two")]),s("el-menu-item",{attrs:{index:"3"}},[t._v("Navigator Three")])],1)],1),s("el-col",{attrs:{span:8}},[s("h5",[t._v("Groups")]),s("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{mode:"vertical","default-active":"1"}},[s("el-menu-item-group",{attrs:{title:"Group One"}},[s("el-menu-item",{attrs:{index:"1"}},[s("i",{staticClass:"el-icon-message"}),t._v("Navigator One")]),s("el-menu-item",{attrs:{index:"2"}},[s("i",{staticClass:"el-icon-message"}),t._v("Navigator Two")])],1),s("el-menu-item-group",{attrs:{title:"Group Two"}},[s("el-menu-item",{attrs:{index:"3"}},[s("i",{staticClass:"el-icon-message"}),t._v("Navigator Three")]),s("el-menu-item",{attrs:{index:"4"}},[s("i",{staticClass:"el-icon-message"}),t._v("Navigator Four")])],1)],1)],1)],1)],1),s("p",[t._v("You can use the el-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-row")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"tac"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-col")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":span")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"8"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("h5")]),t._v(">")]),t._v("With icons"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("h5")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("default-active")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"2"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"el-menu-vertical-demo"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@open")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleOpen"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@close")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleClose"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-submenu")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"1"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("slot")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"title"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("i")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"el-icon-message"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("i")]),t._v(">")]),t._v("Navigator One"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item-group")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("title")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Group One"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"1-1"')]),t._v(">")]),t._v("item one"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"1-2"')]),t._v(">")]),t._v("item one"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item-group")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item-group")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("title")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Group Two"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"1-3"')]),t._v(">")]),t._v("item three"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item-group")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-submenu")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"1-4"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("slot")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"title"')]),t._v(">")]),t._v("item four"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"1-4-1"')]),t._v(">")]),t._v("item one"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-submenu")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-submenu")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"2"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("i")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"el-icon-menu"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("i")]),t._v(">")]),t._v("Navigator Two"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"3"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("i")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"el-icon-setting"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("i")]),t._v(">")]),t._v("Navigator Three"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-col")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-col")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":span")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"8"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("h5")]),t._v(">")]),t._v("Without icons"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("h5")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("default-active")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"2"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"el-menu-vertical-demo"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@open")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleOpen"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@close")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleClose"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("theme")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"dark"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-submenu")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"1"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("slot")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"title"')]),t._v(">")]),t._v("Navigator One"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item-group")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("title")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Group One"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"1-1"')]),t._v(">")]),t._v("item one"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"1-2"')]),t._v(">")]),t._v("item two"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item-group")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item-group")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("title")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Group Two"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"1-3"')]),t._v(">")]),t._v("item three"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item-group")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-submenu")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"1-4"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("slot")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"title"')]),t._v(">")]),t._v("item four"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"1-4-1"')]),t._v(">")]),t._v("item one"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-submenu")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-submenu")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"2"')]),t._v(">")]),t._v("Navigator Two"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"3"')]),t._v(">")]),t._v("Navigator Three"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-col")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-col")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":span")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"8"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("h5")]),t._v(">")]),t._v("Groups"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("h5")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("mode")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"vertical"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("default-active")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"1"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"el-menu-vertical-demo"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item-group")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("title")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Group One"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"1"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("i")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"el-icon-message"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("i")]),t._v(">")]),t._v("Navigator One"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"2"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("i")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"el-icon-message"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("i")]),t._v(">")]),t._v("Navigator Two"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item-group")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item-group")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("title")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Group Two"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"3"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("i")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"el-icon-message"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("i")]),t._v(">")]),t._v("Navigator Three"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"4"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("i")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"el-icon-message"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("i")]),t._v(">")]),t._v("Navigator Four"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item-group")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-col")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-row")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("methods")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("handleOpen")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("key, keyPath")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("console")]),t._v(".log(key, keyPath);\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("handleClose")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("key, keyPath")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("console")]),t._v(".log(key, keyPath);\n }\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(3),s("p",[t._v("Vertical NavMenu could be collapsed.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">\n <el-radio-button :label="false">expand</el-radio-button>\n <el-radio-button :label="true">collapse</el-radio-button>\n</el-radio-group>\n<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">\n <el-submenu index="1">\n <template slot="title">\n <i class="el-icon-message"></i>\n <span slot="title">Navigator One</span>\n </template>\n <el-menu-item-group>\n <span slot="title">Group One</span>\n <el-menu-item index="1-1">item one</el-menu-item>\n <el-menu-item index="1-2">item two</el-menu-item>\n </el-menu-item-group>\n <el-menu-item-group title="Group Two">\n <el-menu-item index="1-3">item three</el-menu-item>\n </el-menu-item-group>\n <el-submenu index="1-4">\n <span slot="title">item four</span>\n <el-menu-item index="1-4-1">item one</el-menu-item>\n </el-submenu>\n </el-submenu>\n <el-menu-item index="2">\n <i class="el-icon-menu"></i>\n <span slot="title">Navigator Two</span>\n </el-menu-item>\n <el-menu-item index="3">\n <i class="el-icon-setting"></i>\n <span slot="title">Navigator Three</span>\n </el-menu-item>\n</el-menu>\n\n\n\n\n',script:"\n export default {\n data: function() {\n return {\n isCollapse: true\n };\n },\n methods: {\n handleOpen: function(key, keyPath) {\n console.log(key, keyPath);\n },\n handleClose: function(key, keyPath) {\n console.log(key, keyPath);\n }\n }\n }\n",style:"\n .el-menu-vertical-demo:not(.el-menu--collapse) {\n width: 200px;\n min-height: 400px;\n }\n"}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-radio-group",{staticStyle:{"margin-bottom":"20px"},model:{value:t.isCollapse,callback:function(s){t.isCollapse=s},expression:"isCollapse"}},[s("el-radio-button",{attrs:{label:!1}},[t._v("expand")]),s("el-radio-button",{attrs:{label:!0}},[t._v("collapse")])],1),s("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2",collapse:t.isCollapse},on:{open:t.handleOpen,close:t.handleClose}},[s("el-submenu",{attrs:{index:"1"}},[s("template",{slot:"title"},[s("i",{staticClass:"el-icon-message"}),s("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigator One")])]),s("el-menu-item-group",[s("span",{attrs:{slot:"title"},slot:"title"},[t._v("Group One")]),s("el-menu-item",{attrs:{index:"1-1"}},[t._v("item one")]),s("el-menu-item",{attrs:{index:"1-2"}},[t._v("item two")])],1),s("el-menu-item-group",{attrs:{title:"Group Two"}},[s("el-menu-item",{attrs:{index:"1-3"}},[t._v("item three")])],1),s("el-submenu",{attrs:{index:"1-4"}},[s("span",{attrs:{slot:"title"},slot:"title"},[t._v("item four")]),s("el-menu-item",{attrs:{index:"1-4-1"}},[t._v("item one")])],1)],2),s("el-menu-item",{attrs:{index:"2"}},[s("i",{staticClass:"el-icon-menu"}),s("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigator Two")])]),s("el-menu-item",{attrs:{index:"3"}},[s("i",{staticClass:"el-icon-setting"}),s("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigator Three")])])],1)],1),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-group")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"isCollapse"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("style")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"margin-bottom: 20px;"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":label")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"false"')]),t._v(">")]),t._v("expand"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":label")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"true"')]),t._v(">")]),t._v("collapse"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-button")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-group")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("default-active")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"2"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"el-menu-vertical-demo"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@open")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleOpen"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@close")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleClose"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":collapse")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"isCollapse"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-submenu")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"1"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("slot")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"title"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("i")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"el-icon-message"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("i")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("slot")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"title"')]),t._v(">")]),t._v("Navigator One"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item-group")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("slot")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"title"')]),t._v(">")]),t._v("Group One"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"1-1"')]),t._v(">")]),t._v("item one"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"1-2"')]),t._v(">")]),t._v("item two"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item-group")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item-group")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("title")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Group Two"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"1-3"')]),t._v(">")]),t._v("item three"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item-group")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-submenu")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"1-4"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("slot")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"title"')]),t._v(">")]),t._v("item four"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"1-4-1"')]),t._v(">")]),t._v("item one"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-submenu")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-submenu")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"2"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("i")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"el-icon-menu"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("i")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("slot")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"title"')]),t._v(">")]),t._v("Navigator Two"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("index")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"3"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("i")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"el-icon-setting"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("i")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("slot")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"title"')]),t._v(">")]),t._v("Navigator Three"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu-item")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-menu")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("style")]),t._v(">")]),s("span",{attrs:{class:"css"}},[t._v("\n "),s("span",{attrs:{class:"hljs-selector-class"}},[t._v(".el-menu-vertical-demo")]),s("span",{attrs:{class:"hljs-selector-pseudo"}},[t._v(":not(.el-menu--collapse)")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("width")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("200px")]),t._v(";\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("min-height")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("400px")]),t._v(";\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("style")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("isCollapse")]),t._v(": "),s("span",{attrs:{class:"hljs-literal"}},[t._v("true")]),t._v("\n };\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("methods")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("handleOpen")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("key, keyPath")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("console")]),t._v(".log(key, keyPath);\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("handleClose")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("key, keyPath")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("console")]),t._v(".log(key, keyPath);\n }\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(4),t._m(5),t._m(6),t._m(7),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),t._m(13),t._m(14),t._m(15)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"navmenu"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#navmenu","aria-hidden":"true"}},[this._v("¶")]),this._v(" NavMenu")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"top-bar"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#top-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Top bar")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"side-bar"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#side-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Side bar")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"collapse"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"menu-attribute"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#menu-attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu Attribute")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("mode")]),t("td",[s._v("menu display mode")]),t("td",[s._v("string")]),t("td",[s._v("horizontal/vertical")]),t("td",[s._v("vertical")])]),t("tr",[t("td",[s._v("collapse")]),t("td",[s._v("whether the menu is collapsed (available only in vertical mode)")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("theme")]),t("td",[s._v("theme color")]),t("td",[s._v("string")]),t("td",[s._v("light/dark")]),t("td",[s._v("light")])]),t("tr",[t("td",[s._v("default-active")]),t("td",[s._v("index of currently active menu")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("default-openeds")]),t("td",[s._v("array that contains keys of currently active sub-menus")]),t("td",[s._v("Array")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("unique-opened")]),t("td",[s._v("whether only one sub-menu can be active")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("menu-trigger")]),t("td",[s._v("how sub-menus are triggered, only works when "),t("code",{pre:!0},[s._v("mode")]),s._v(" is 'horizontal'")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("hover")])]),t("tr",[t("td",[s._v("router")]),t("td",[s._v("whether "),t("code",{pre:!0},[s._v("vue-router")]),s._v(" mode is activated. If true, index will be used as 'path' to activate the route action")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"menu-events"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#menu-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu Events")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Event Name")]),t("th",[s._v("Description")]),t("th",[s._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[s._v("select")]),t("td",[s._v("callback function when menu is activated")]),t("td",[s._v("index: index of activated menu, indexPath: index path of activated menu")])]),t("tr",[t("td",[s._v("open")]),t("td",[s._v("callback function when sub-menu expands")]),t("td",[s._v("index: index of expanded sub-menu, indexPath: index path of expanded sub-menu")])]),t("tr",[t("td",[s._v("close")]),t("td",[s._v("callback function when sub-menu collapses")]),t("td",[s._v("index: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"menu-item-events"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#menu-item-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu-Item Events")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Event Name")]),t("th",[s._v("Description")]),t("th",[s._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[s._v("click")]),t("td",[s._v("callback function when menu-item is clicked")]),t("td",[s._v("el: menu-item instance")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"submenu-attribute"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#submenu-attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" SubMenu Attribute")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("index")]),t("td",[s._v("unique identification")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"menu-item-attribute"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#menu-item-attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu-Item Attribute")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("index")]),t("td",[s._v("unique identification")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("route")]),t("td",[s._v("Vue Router object")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"menu-group-attribute"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#menu-group-attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu-Group Attribute")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("title")]),t("td",[s._v("group title")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])}],!1,null,null,null);t.default=a.exports},860:function(s,t,a){"use strict";a.r(t);var l={methods:{open:function(){var t=this;t.$alert("This is a message","Title",{confirmButtonText:"OK",callback:function(s){t.$message({type:"info",message:"action:"+s})}})},open2:function(){var t=this;t.$confirm("This will permanently delete the file. Continue?","Warning",{confirmButtonText:"OK",cancelButtonText:"Cancel",type:"warning",callback:function(s){"confirm"===s?setTimeout(function(){t.$message({message:"Delete completed",type:"success"})},200):setTimeout(function(){t.$message({message:"Delete canceled",type:"info"})},200)}})},open3:function(){var a=this;this.$prompt("Please input your email","Tips",{confirmButtonText:"OK",cancelButtonText:"Cancel",inputPattern:/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage:"Invalid Email",callback:function(s,t){"confirm"===s?setTimeout(function(){a.$message({type:"success",message:"Your email is: "+t.inputValue})},200):setTimeout(function(){a.$message({type:"info",message:"Input canceled"})},200)}})},open4:function(){var s=this.$createElement;this.$msgbox({title:"Message",message:s("p",null,[s("span",null,"Message can be "),s("i",{style:"color: teal"},"VNode")]),showCancelButton:!0,confirmButtonText:"OK",cancelButtonText:"Cancel",beforeClose:function(s,t,a){"confirm"===s?(t.confirmButtonLoading=!0,t.confirmButtonText="Loading...",setTimeout(function(){a(),setTimeout(function(){t.confirmButtonLoading=!1},300)},3e3)):a()},callback:function(s){setTimeout(function(){_this.$message({type:"info",message:"action: "+s})},200)}})}}},a=a(0),a=Object(a.a)(l,function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("section",[s._m(0),t("p",[s._v("A set of modal boxes simulating system message box, mainly for message prompt, success tips, error messages and query information.")]),s._m(1),t("p",[s._v("Alert interrupts user operation until the user confirms.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-button type="text" @click="open">Click to open the Message Box</el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open: function() {\n this.$alert('This is a message', 'Title', {\n confirmButtonText: 'OK',\n callback: function(action) {\n this.$message({\n type: 'info',\n message: 'action:' + action \n });\n }\n });\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{type:"text"},on:{click:s.open}},[s._v("Click to open the Message Box")])]],2),t("p",[s._v("Open an alert by calling the "),t("code",[s._v("$alert")]),s._v(" method. It simulates the system's "),t("code",[s._v("alert")]),s._v(", and cannot be closed by pressing ESC or clicking outside the box. In this example, two parameters "),t("code",[s._v("message")]),s._v(" and "),t("code",[s._v("title")]),s._v(" are received. It is worth mentioning that when the box is closed, it returns a "),t("code",[s._v("Promise")]),s._v(" object for further processing. If you are not sure if your target browsers support "),t("code",[s._v("Promise")]),s._v(", you should import a third party polyfill or use callbacks instead like this example.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open"')]),s._v(">")]),s._v("Click to open the Message Box"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("open")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}}),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$alert("),t("span",{attrs:{class:"hljs-string"}},[s._v("'This is a message'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Title'")]),s._v(", {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("confirmButtonText")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'OK'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("callback")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}},[s._v("action")]),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'action:'")]),s._v(" + action \n });\n }\n });\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Confirm is used to ask users' confirmation.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-button type="text" @click="open2">Click to open the Message Box</el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open2: function() {\n var _this = this;\n _this.$confirm('This will permanently delete the file. Continue?', 'Warning', {\n confirmButtonText: 'OK',\n cancelButtonText: 'Cancel',\n type: 'warning',\n callback: function(action) {\n if(action === 'confirm') {\n _this.$message({\n message: 'Delete completed',\n type: 'success'\n });\n }else {\n _this.$message({\n message: 'Delete canceled',\n type: 'info'\n });\n }\n }\n });\n },\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{type:"text"},on:{click:s.open2}},[s._v("Click to open the Message Box")])]],2),t("p",[s._v("Call "),t("code",[s._v("$confirm")]),s._v(" method to open a confirm, and it simulates the system's "),t("code",[s._v("confirm")]),s._v(". We can also highly customize Message Box by passing a third attribute "),t("code",[s._v("options")]),s._v(" which is a literal object. The attribute "),t("code",[s._v("type")]),s._v(" indicates the message type, and it's value can be "),t("code",[s._v("success")]),s._v(", "),t("code",[s._v("error")]),s._v(", "),t("code",[s._v("info")]),s._v(" and "),t("code",[s._v("warning")]),s._v(". Note that the second attribute "),t("code",[s._v("title")]),s._v(" must be a "),t("code",[s._v("string")]),s._v(", and if it is an "),t("code",[s._v("object")]),s._v(", it will be handled as the attribute "),t("code",[s._v("options")]),s._v(". Here we use "),t("code",[s._v("Promise")]),s._v(" to handle further processing.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open2"')]),s._v(">")]),s._v("Click to open the Message Box"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("open2")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}}),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" _this = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(";\n _this.$confirm("),t("span",{attrs:{class:"hljs-string"}},[s._v("'This will permanently delete the file. Continue?'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Warning'")]),s._v(", {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("confirmButtonText")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'OK'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("cancelButtonText")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Cancel'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'warning'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("callback")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}},[s._v("action")]),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v("(action === "),t("span",{attrs:{class:"hljs-string"}},[s._v("'confirm'")]),s._v(") {\n _this.$message({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Delete completed'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v("\n });\n }"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n _this.$message({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Delete canceled'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v("\n });\n }\n }\n });\n },\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Prompt is used when user input is required.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-button type="text" @click="open3">Click to open Message Box</el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open3: function() {\n var _this = this;\n this.$prompt('Please input your email', 'Tips', {\n confirmButtonText: 'OK',\n cancelButtonText: 'Cancel',\n inputPattern: /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n inputErrorMessage: 'Invalid Email',\n callback: function(action, instance) {\n if(action === 'confirm') {\n _this.$message({\n type: 'success',\n message: 'Your email is: ' + instance.inputValue\n });\n }else {\n _this.$message({\n type: 'info',\n message: 'Input canceled'\n });\n }\n }\n });\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{type:"text"},on:{click:s.open3}},[s._v("Click to open Message Box")])]],2),t("p",[s._v("Call "),t("code",[s._v("$prompt")]),s._v(" method to open a prompt, and it simulates the system's "),t("code",[s._v("prompt")]),s._v(". You can use "),t("code",[s._v("inputPattern")]),s._v(" parameter to specify your own RegExp pattern. Use "),t("code",[s._v("inputValidator")]),s._v(" to specify validation method, and it should return "),t("code",[s._v("Boolean")]),s._v(" or "),t("code",[s._v("String")]),s._v(". Returning "),t("code",[s._v("false")]),s._v(" or "),t("code",[s._v("String")]),s._v(" means the validation has failed, and the string returned will be used as the "),t("code",[s._v("inputErrorMessage")]),s._v(". In addition, you can customize the placeholder of the input box with "),t("code",[s._v("inputPlaceholder")]),s._v(" parameter.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open3"')]),s._v(">")]),s._v("Click to open Message Box"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("open3")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}}),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" _this = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(";\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$prompt("),t("span",{attrs:{class:"hljs-string"}},[s._v("'Please input your email'")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Tips'")]),s._v(", {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("confirmButtonText")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'OK'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("cancelButtonText")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Cancel'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("inputPattern")]),s._v(": "),t("span",{attrs:{class:"hljs-regexp"}},[s._v("/[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("inputErrorMessage")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Invalid Email'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("callback")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}},[s._v("action, instance")]),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v("(action === "),t("span",{attrs:{class:"hljs-string"}},[s._v("'confirm'")]),s._v(") {\n _this.$message({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Your email is: '")]),s._v(" + instance.inputValue\n });\n }"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n _this.$message({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Input canceled'")]),s._v("\n });\n }\n }\n });\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("Can be customized to show various content.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-button type="text" @click="open4">Click to open Message Box</el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open4: function() {\n var h = this.$createElement;\n this.$msgbox({\n title: 'Message',\n message: h('p', null, [\n h('span', null, 'Message can be '),\n h('i', { style: 'color: teal' }, 'VNode')\n ]),\n showCancelButton: true,\n confirmButtonText: 'OK',\n cancelButtonText: 'Cancel',\n beforeClose: function(action, instance, done) {\n if (action === 'confirm') {\n instance.confirmButtonLoading = true;\n instance.confirmButtonText = 'Loading...';\n setTimeout(function() {\n done();\n setTimeout(function() {\n instance.confirmButtonLoading = false;\n }, 300);\n }, 3000);\n } else {\n done();\n }\n },\n callback: function(action) {\n _this.$message({\n type: 'info',\n message: 'action: ' + action\n });\n }\n });\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{type:"text"},on:{click:s.open4}},[s._v("Click to open Message Box")])]],2),t("p",[s._v("The three methods mentioned above are repackagings of the "),t("code",[s._v("$msgbox")]),s._v(" method. This example calls "),t("code",[s._v("$msgbox")]),s._v(" method directly using the "),t("code",[s._v("showCancelButton")]),s._v(" attribute, which is used to indicate if a cancel button is displayed. Besides we can use "),t("code",[s._v("cancelButtonClass")]),s._v(" to add a custom style and "),t("code",[s._v("cancelButtonText")]),s._v(" to customize the button text (the confirm button also has these fields, and a complete list of fields can be found at the end of this documentation). This example also uses the "),t("code",[s._v("beforeClose")]),s._v(" attribute. It is a method and will be triggered when the MessageBox instance will be closed, and its execution will stop the instance from closing. It has three parameters: "),t("code",[s._v("action")]),s._v(", "),t("code",[s._v("instance")]),s._v(" and "),t("code",[s._v("done")]),s._v(". Using it enables you to manipulate the instance before it closes, e.g. activating "),t("code",[s._v("loading")]),s._v(" for confirm button; you can invoke the "),t("code",[s._v("done")]),s._v(" method to close the MessageBox instance (if "),t("code",[s._v("done")]),s._v(" is not called inside "),t("code",[s._v("beforeClose")]),s._v(", the instance will not be closed).")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open4"')]),s._v(">")]),s._v("Click to open Message Box"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("open4")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}}),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" h = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createElement;\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$msgbox({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Message'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": h("),t("span",{attrs:{class:"hljs-string"}},[s._v("'p'")]),s._v(", "),t("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v(", [\n h("),t("span",{attrs:{class:"hljs-string"}},[s._v("'span'")]),s._v(", "),t("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Message can be '")]),s._v("),\n h("),t("span",{attrs:{class:"hljs-string"}},[s._v("'i'")]),s._v(", { "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'color: teal'")]),s._v(" }, "),t("span",{attrs:{class:"hljs-string"}},[s._v("'VNode'")]),s._v(")\n ]),\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("showCancelButton")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("confirmButtonText")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'OK'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("cancelButtonText")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Cancel'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("beforeClose")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}},[s._v("action, instance, done")]),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (action === "),t("span",{attrs:{class:"hljs-string"}},[s._v("'confirm'")]),s._v(") {\n instance.confirmButtonLoading = "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n instance.confirmButtonText = "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Loading...'")]),s._v(";\n setTimeout("),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}}),s._v(") ")]),s._v("{\n done();\n setTimeout("),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}}),s._v(") ")]),s._v("{\n instance.confirmButtonLoading = "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n }, "),t("span",{attrs:{class:"hljs-number"}},[s._v("300")]),s._v(");\n }, "),t("span",{attrs:{class:"hljs-number"}},[s._v("3000")]),s._v(");\n } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n done();\n }\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("callback")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}},[s._v("action")]),s._v(") ")]),s._v("{\n _this.$message({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'action: '")]),s._v(" + action\n });\n }\n });\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"messagebox"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#messagebox","aria-hidden":"true"}},[this._v("¶")]),this._v(" MessageBox")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"alert"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alert")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"confirm"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#confirm","aria-hidden":"true"}},[this._v("¶")]),this._v(" Confirm")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"prompt"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#prompt","aria-hidden":"true"}},[this._v("¶")]),this._v(" Prompt")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"customization"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#customization","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customization")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"global-method"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[this._v("¶")]),this._v(" Global method")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[s._v("YufpWP has added the following global methods for Vue.prototype: "),t("code",{pre:!0},[s._v("$msgbox")]),s._v(", "),t("code",{pre:!0},[s._v("$alert")]),s._v(", "),t("code",{pre:!0},[s._v("$confirm")]),s._v(" and "),t("code",{pre:!0},[s._v("$prompt")]),s._v(". So in a vue instance you can call "),t("code",{pre:!0},[s._v("MessageBox")]),s._v(" like what we did in this page.")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"local-import"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[this._v("¶")]),this._v(" Local import")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[s._v("Import "),t("code",{pre:!0},[s._v("MessageBox")]),s._v(":")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-javascript"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { MessageBox } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'yuwp-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[s._v("The corresponding methods are: "),t("code",{pre:!0},[s._v("MessageBox")]),s._v(", "),t("code",{pre:!0},[s._v("MessageBox.alert")]),s._v(", "),t("code",{pre:!0},[s._v("MessageBox.confirm")]),s._v(" and "),t("code",{pre:!0},[s._v("MessageBox.prompt")]),s._v(".")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"options"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("title")]),t("td",[s._v("title of the MessageBox")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("message")]),t("td",[s._v("content of the MessageBox")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("message type, used for icon display")]),t("td",[s._v("string")]),t("td",[s._v("success/info/warning/error")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("customClass")]),t("td",[s._v("custom class name for MessageBox")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("callback")]),t("td",[s._v("MessageBox closing callback if you don't prefer Promise")]),t("td",[s._v("function(action), where action can be 'confirm' or 'cancel', and "),t("code",{pre:!0},[s._v("instance")]),s._v(" is the MessageBox instance. You can access to that instance's attributes and methods")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("beforeClose")]),t("td",[s._v("callback before MessageBox closes, and it will prevent MessageBox from closing")]),t("td",[s._v("function(action, instance, done), where "),t("code",{pre:!0},[s._v("action")]),s._v(" can be 'confirm' or 'cancel'; "),t("code",{pre:!0},[s._v("instance")]),s._v(" is the MessageBox instance, and you can access to that instance's attributes and methods; "),t("code",{pre:!0},[s._v("done")]),s._v(" is for closing the instance")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("lockScroll")]),t("td",[s._v("whether to lock body scroll when MessageBox prompts")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("showCancelButton")]),t("td",[s._v("whether to show a cancel button")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false (true when called with confirm and prompt)")])]),t("tr",[t("td",[s._v("showConfirmButton")]),t("td",[s._v("whether to show a confirm button")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("cancelButtonText")]),t("td",[s._v("text content of cancel button")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("Cancel")])]),t("tr",[t("td",[s._v("confirmButtonText")]),t("td",[s._v("text content of confirm button")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("OK")])]),t("tr",[t("td",[s._v("cancelButtonClass")]),t("td",[s._v("custom class name of cancel button")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("confirmButtonClass")]),t("td",[s._v("custom class name of confirm button")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("closeOnClickModal")]),t("td",[s._v("whether MessageBox can be closed by clicking the mask")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true (false when called with alert)")])]),t("tr",[t("td",[s._v("closeOnPressEscape")]),t("td",[s._v("whether MessageBox can be closed by pressing the ESC")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true (false when called with alert)")])]),t("tr",[t("td",[s._v("showInput")]),t("td",[s._v("whether to show an input")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false (true when called with prompt)")])]),t("tr",[t("td",[s._v("inputPlaceholder")]),t("td",[s._v("placeholder of input")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("inputValue")]),t("td",[s._v("initial value of input")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("inputPattern")]),t("td",[s._v("regexp for the input")]),t("td",[s._v("regexp")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("inputValidator")]),t("td",[s._v("validation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessage")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("inputErrorMessage")]),t("td",[s._v("error message when validation fails")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("Illegal input")])])])])}],!1,null,null,null);t.default=a.exports},861:function(s,t,a){"use strict";a.r(t);var l=a(1),n={data:function(){return{currentPage1:5,currentPage2:5,currentPage3:5,currentPage4:4}},methods:{handleSizeChange:function(s){console.log(s+"items per page")},handleCurrentChange:function(s){console.log("current page:"+s)}},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source"),t=s[0],s=s[s.length-1];Object(l.a)(t,"first"),Object(l.a)(s,"last")})}},a=(a(748),a(0)),a=Object(a.a)(n,function(){var t=this,s=t.$createElement,s=t._self._c||s;return s("section",[t._m(0),s("p",[t._v("If you have too much data to display in one page, use pagination.")]),t._m(1),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n <span class="demonstration">When you have few pages</span>\n <el-pagination layout="prev, pager, next" :total="50">\n </el-pagination>\n</div>\n<div class="block">\n <span class="demonstration">When you have more than 7 pages</span>\n <el-pagination layout="prev, pager, next" :total="1000">\n </el-pagination>\n</div>\n',script:null,style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("div",{staticClass:"block"},[s("span",{staticClass:"demonstration"},[t._v("When you have few pages")]),s("el-pagination",{attrs:{layout:"prev, pager, next",total:50}})],1),s("div",{staticClass:"block"},[s("span",{staticClass:"demonstration"},[t._v("When you have more than 7 pages")]),s("el-pagination",{attrs:{layout:"prev, pager, next",total:1e3}})],1)]),s("p",[t._v("Set "),s("code",[t._v("layout")]),t._v(" with different pagination elements you wish to display separated with a comma. Pagination elements are: "),s("code",[t._v("prev")]),t._v(" (a button navigating to the previous page), "),s("code",[t._v("next")]),t._v(" (a button navigating to the next page), "),s("code",[t._v("pager")]),t._v(" (page list), "),s("code",[t._v("jumper")]),t._v(" (a jump-to input), "),s("code",[t._v("total")]),t._v(" (total item count), "),s("code",[t._v("size")]),t._v(" (a select to determine page size) and "),s("code",[t._v("->")]),t._v("(every element after this symbol will be pulled to the right).")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"demonstration"')]),t._v(">")]),t._v("When you have few pages"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-pagination")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("layout")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"prev, pager, next"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":total")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"50"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-pagination")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"demonstration"')]),t._v(">")]),t._v("When you have more than 7 pages"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-pagination")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("layout")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"prev, pager, next"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":total")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"1000"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-pagination")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n")])])])]),t._m(2),s("p",[t._v("Use small pagination in the case of limited space.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-pagination small layout="prev, pager, next" :total="50">\n</el-pagination>\n',script:null,style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-pagination",{attrs:{small:"",layout:"prev, pager, next",total:50}})],1),s("p",[t._v("Just set the "),s("code",[t._v("small")]),t._v(" attribute to "),s("code",[t._v("true")]),t._v(" and the Pagination becomes smaller.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-pagination")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("small")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("layout")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"prev, pager, next"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":total")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"50"')]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-pagination")]),t._v(">")]),t._v("\n")])])])]),t._m(3),s("p",[t._v("Add more modules based on your scenario.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div class="block">\n <span class="demonstration">Total item count</span>\n <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage1" :page-size="100" layout="total, prev, pager, next" :total="1000">\n </el-pagination>\n </div>\n <div class="block">\n <span class="demonstration">Change page size</span>\n <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage2" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="sizes, prev, pager, next" :total="1000">\n </el-pagination>\n </div>\n <div class="block">\n <span class="demonstration">Jump to</span>\n <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage3" :page-size="100" layout="prev, pager, next, jumper" :total="1000">\n </el-pagination>\n </div>\n <div class="block">\n <span class="demonstration">All combined</span>\n <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">\n </el-pagination>\n </div>\n</template>\n\n',script:"\n export default {\n methods: {\n handleSizeChange: function(val) {\n console.log(val + 'items per page');\n },\n handleCurrentChange: function(val) {\n console.log('current page:' + val);\n }\n },\n data: function() {\n return {\n currentPage1: 5,\n currentPage2: 5,\n currentPage3: 5,\n currentPage4: 4\n };\n }\n }\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[s("div",{staticClass:"block"},[s("span",{staticClass:"demonstration"},[t._v("Total item count")]),s("el-pagination",{attrs:{"current-page":t.currentPage1,"page-size":100,layout:"total, prev, pager, next",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(s){t.currentPage1=s}}})],1),s("div",{staticClass:"block"},[s("span",{staticClass:"demonstration"},[t._v("Change page size")]),s("el-pagination",{attrs:{"current-page":t.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(s){t.currentPage2=s}}})],1),s("div",{staticClass:"block"},[s("span",{staticClass:"demonstration"},[t._v("Jump to")]),s("el-pagination",{attrs:{"current-page":t.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(s){t.currentPage3=s}}})],1),s("div",{staticClass:"block"},[s("span",{staticClass:"demonstration"},[t._v("All combined")]),s("el-pagination",{attrs:{"current-page":t.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(s){t.currentPage4=s}}})],1)]],2),s("p",[t._v("This example is a complete use case. It uses "),s("code",[t._v("size-change")]),t._v(" and "),s("code",[t._v("current-change")]),t._v(" event to handle page size changes and current page changes. "),s("code",[t._v("page-sizes")]),t._v(" accepts an array of integers, each of which represents a different page size in the "),s("code",[t._v("sizes")]),t._v(" select options, e.g. "),s("code",[t._v("[100, 200, 300, 400]")]),t._v(" indicates that the select will have four options: 100, 200, 300 or 400 items per page.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"demonstration"')]),t._v(">")]),t._v("Total item count"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-pagination")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@size-change")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleSizeChange"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@current-change")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleCurrentChange"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":current-page.sync")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"currentPage1"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":page-size")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"100"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("layout")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"total, prev, pager, next"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":total")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"1000"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-pagination")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"demonstration"')]),t._v(">")]),t._v("Change page size"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-pagination")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@size-change")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleSizeChange"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@current-change")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleCurrentChange"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":current-page.sync")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"currentPage2"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":page-sizes")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"[100, 200, 300, 400]"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":page-size")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"100"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("layout")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"sizes, prev, pager, next"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":total")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"1000"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-pagination")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"demonstration"')]),t._v(">")]),t._v("Jump to"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-pagination")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@size-change")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleSizeChange"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@current-change")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleCurrentChange"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":current-page.sync")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"currentPage3"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":page-size")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"100"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("layout")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"prev, pager, next, jumper"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":total")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"1000"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-pagination")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"demonstration"')]),t._v(">")]),t._v("All combined"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-pagination")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@size-change")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleSizeChange"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@current-change")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleCurrentChange"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":current-page.sync")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"currentPage4"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":page-sizes")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"[100, 200, 300, 400]"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":page-size")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"100"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("layout")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"total, sizes, prev, pager, next, jumper"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":total")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"400"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-pagination")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("methods")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("handleSizeChange")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("val")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("console")]),t._v(".log(val + "),s("span",{attrs:{class:"hljs-string"}},[t._v("'items per page'")]),t._v(");\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("handleCurrentChange")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("val")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("console")]),t._v(".log("),s("span",{attrs:{class:"hljs-string"}},[t._v("'current page:'")]),t._v(" + val);\n }\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("currentPage1")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("5")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("currentPage2")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("5")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("currentPage3")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("5")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("currentPage4")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("4")]),t._v("\n };\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(4),t._m(5),t._m(6),t._m(7),t._m(8),t._m(9)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"pagination"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#pagination","aria-hidden":"true"}},[this._v("¶")]),this._v(" Pagination")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"basic-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"small-pagination"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#small-pagination","aria-hidden":"true"}},[this._v("¶")]),this._v(" Small Pagination")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"more-elements"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#more-elements","aria-hidden":"true"}},[this._v("¶")]),this._v(" More elements")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("small")]),t("td",[s._v("whether to use small pagination")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("page-size")]),t("td",[s._v("item count of each page")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("10")])]),t("tr",[t("td",[s._v("total")]),t("td",[s._v("total item count")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("page-count")]),t("td",[s._v("total page count. Set either "),t("code",{pre:!0},[s._v("total")]),s._v(" or "),t("code",{pre:!0},[s._v("page-count")]),s._v(" and pages will be displayed; if you need "),t("code",{pre:!0},[s._v("page-sizes")]),s._v(", "),t("code",{pre:!0},[s._v("total")]),s._v(" is required")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("current-page")]),t("td",[s._v("current page number, supports the .sync modifier")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("1")])]),t("tr",[t("td",[s._v("layout")]),t("td",[s._v("layout of Pagination, elements separated with a comma")]),t("td",[s._v("string")]),t("td",[t("code",{pre:!0},[s._v("sizes")]),s._v(", "),t("code",{pre:!0},[s._v("prev")]),s._v(", "),t("code",{pre:!0},[s._v("pager")]),s._v(", "),t("code",{pre:!0},[s._v("next")]),s._v(", "),t("code",{pre:!0},[s._v("jumper")]),s._v(", "),t("code",{pre:!0},[s._v("->")]),s._v(", "),t("code",{pre:!0},[s._v("total")]),s._v(", "),t("code",{pre:!0},[s._v("slot")])]),t("td",[s._v("'prev, pager, next, jumper, ->, total'")])]),t("tr",[t("td",[s._v("page-sizes")]),t("td",[s._v("options of item count per page")]),t("td",[s._v("number[]")]),t("td",[s._v("—")]),t("td",[s._v("[10, 20, 30, 40, 50, 100]")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"events"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Event Name")]),t("th",[s._v("Description")]),t("th",[s._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[s._v("size-change")]),t("td",[s._v("triggers when "),t("code",{pre:!0},[s._v("page-size")]),s._v(" changes")]),t("td",[s._v("the new "),t("code",{pre:!0},[s._v("page-size")])])]),t("tr",[t("td",[s._v("current-change")]),t("td",[s._v("triggers when "),t("code",{pre:!0},[s._v("current-page")]),s._v(" changes")]),t("td",[s._v("the new "),t("code",{pre:!0},[s._v("current-page")])])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"slot"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Name")]),t("th",[s._v("Description")])])]),t("tbody",[t("tr",[t("td",[s._v("—")]),t("td",[s._v("custom content. To use this, you need to declare "),t("code",{pre:!0},[s._v("slot")]),s._v(" in "),t("code",{pre:!0},[s._v("layout")])])])])])}],!1,null,null,null);t.default=a.exports},862:function(s,t,a){"use strict";a.r(t);var l={data:function(){return{visible2:!1,gridData:[{date:"2016-05-02",name:"Jack",address:"New York City"},{date:"2016-05-04",name:"Jack",address:"New York City"},{date:"2016-05-01",name:"Jack",address:"New York City"},{date:"2016-05-03",name:"Jack",address:"New York City"}],gridData2:[{date:"2016-05-02",name:"Jack",address:"New York City"},{date:"2016-05-04",name:"Jack",address:"New York City",$info:!0},{date:"2016-05-01",name:"Jack",address:"New York City"},{date:"2016-05-03",name:"Jack",address:"New York City",$positive:!0}],gridData3:[{tag:"Home",date:"2016-05-03",name:"Jack",address:"New York City"},{tag:"Company",date:"2016-05-02",name:"Jack",address:"New York City"},{tag:"Company",date:"2016-05-04",name:"Jack",address:"New York City"},{tag:"Home",date:"2016-05-01",name:"Jack",address:"New York City"},{tag:"Company",date:"2016-05-08",name:"Jack",address:"New York City"},{tag:"Home",date:"2016-05-06",name:"Jack",address:"New York City"},{tag:"Company",date:"2016-05-07",name:"Jack",address:"New York City"}],singleSelection:{},multipleSelection:[],model:""}}},a=(a(749),a(0)),a=Object(a.a)(l,function(){var t=this,s=t.$createElement,s=t._self._c||s;return s("section",[t._m(0),t._m(1),t._m(2),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-popover ref="popover1" placement="top-start" title="Title" width="200" trigger="hover" content="this is content, this is content, this is content">\n</el-popover>\n\n<el-popover ref="popover2" placement="bottom" title="Title" width="200" trigger="click" content="this is content, this is content, this is content">\n</el-popover>\n\n<el-button v-popover:popover1>Hover to activate</el-button>\n<el-button v-popover:popover2>Click to activate</el-button>\n<el-popover placement="right" title="Title" width="200" trigger="focus" content="this is content, this is content, this is content">\n <el-button slot="reference">Focus to activate</el-button>\n</el-popover>\n',script:null,style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-popover",{ref:"popover1",attrs:{placement:"top-start",title:"Title",width:"200",trigger:"hover",content:"this is content, this is content, this is content"}}),s("el-popover",{ref:"popover2",attrs:{placement:"bottom",title:"Title",width:"200",trigger:"click",content:"this is content, this is content, this is content"}}),s("el-button",{directives:[{name:"popover",rawName:"v-popover:popover1",arg:"popover1"}]},[t._v("Hover to activate")]),s("el-button",{directives:[{name:"popover",rawName:"v-popover:popover2",arg:"popover2"}]},[t._v("Click to activate")]),s("el-popover",{attrs:{placement:"right",title:"Title",width:"200",trigger:"focus",content:"this is content, this is content, this is content"}},[s("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("Focus to activate")])],1)],1),s("p",[t._v("Add "),s("code",[t._v("ref")]),t._v(" in your popover, then in your button, use "),s("code",[t._v("v-popover")]),t._v(" directive to link the button and the popover. The attribute "),s("code",[t._v("trigger")]),t._v(" is used to define how popover is triggered: "),s("code",[t._v("hover")]),t._v(", "),s("code",[t._v("click")]),t._v(" or "),s("code",[t._v("focus")]),t._v(". Alternatively, you can specify reference using a named "),s("code",[t._v("slot")]),t._v(".")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-popover")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("ref")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"popover1"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placement")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"top-start"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("title")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Title"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("width")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"200"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("trigger")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"hover"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("content")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"this is content, this is content, this is content"')]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-popover")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-popover")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("ref")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"popover2"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placement")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"bottom"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("title")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Title"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("width")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"200"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("trigger")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"click"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("content")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"this is content, this is content, this is content"')]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-popover")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-popover:popover1")]),t._v(">")]),t._v("Hover to activate"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-popover:popover2")]),t._v(">")]),t._v("Click to activate"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-popover")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placement")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"right"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("title")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Title"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("width")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"200"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("trigger")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"focus"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("content")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"this is content, this is content, this is content"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("slot")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"reference"')]),t._v(">")]),t._v("Focus to activate"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-popover")]),t._v(">")]),t._v("\n")])])])]),t._m(3),s("p",[t._v("Other components can be nested in popover. Following is an example of nested table.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-popover ref="popover4" placement="right" width="400" trigger="click">\n <el-table :data="gridData">\n <el-table-column width="150" property="date" label="date"></el-table-column>\n <el-table-column width="100" property="name" label="name"></el-table-column>\n <el-table-column width="300" property="address" label="address"></el-table-column>\n </el-table>\n</el-popover>\n\n<el-button v-popover:popover4>Click to activate</el-button>\n\n\n',script:"\n export default {\n data: function() {\n return {\n gridData: [{\n date: '2016-05-02',\n name: 'Jack',\n address: 'New York City'\n }, {\n date: '2016-05-04',\n name: 'Jack',\n address: 'New York City'\n }, {\n date: '2016-05-01',\n name: 'Jack',\n address: 'New York City'\n }, {\n date: '2016-05-03',\n name: 'Jack',\n address: 'New York City'\n }]\n };\n }\n };\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-popover",{ref:"popover4",attrs:{placement:"right",width:"400",trigger:"click"}},[s("el-table",{attrs:{data:t.gridData}},[s("el-table-column",{attrs:{width:"150",property:"date",label:"date"}}),s("el-table-column",{attrs:{width:"100",property:"name",label:"name"}}),s("el-table-column",{attrs:{width:"300",property:"address",label:"address"}})],1)],1),s("el-button",{directives:[{name:"popover",rawName:"v-popover:popover4",arg:"popover4"}]},[t._v("Click to activate")])],1),s("p",[t._v("replace the "),s("code",[t._v("content")]),t._v(" attribute with a default "),s("code",[t._v("slot")]),t._v(".")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-popover")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("ref")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"popover4"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placement")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"right"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("width")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"400"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("trigger")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"click"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-table")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":data")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"gridData"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-table-column")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("width")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"150"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("property")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"date"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"date"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-table-column")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-table-column")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("width")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"100"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("property")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"name"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"name"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-table-column")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-table-column")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("width")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"300"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("property")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"address"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"address"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-table-column")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-table")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-popover")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-popover:popover4")]),t._v(">")]),t._v("Click to activate"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("gridData")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("date")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'2016-05-02'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Jack'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("address")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'New York City'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("date")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'2016-05-04'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Jack'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("address")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'New York City'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("date")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'2016-05-01'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Jack'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("address")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'New York City'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("date")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'2016-05-03'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Jack'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("address")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'New York City'")]),t._v("\n }]\n };\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(4),s("p",[t._v("Of course, you can nest other operations. It's more light-weight than using a dialog.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-popover ref="popover5" placement="top" width="160" v-model="visible2">\n <p>Are you sure to delete this?</p>\n <div style="text-align: right; margin: 0">\n <el-button size="mini" type="text" @click="visible2 = false">cancel</el-button>\n <el-button type="primary" size="mini" @click="visible2 = false">confirm</el-button>\n </div>\n</el-popover>\n\n<el-button v-popover:popover5>Delete</el-button>\n\n\n',script:"\n export default {\n data: function() {\n return {\n visible2: false,\n };\n }\n }\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-popover",{ref:"popover5",attrs:{placement:"top",width:"160"},model:{value:t.visible2,callback:function(s){t.visible2=s},expression:"visible2"}},[s("p",[t._v("Are you sure to delete this?")]),s("div",{staticStyle:{"text-align":"right",margin:"0"}},[s("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(s){t.visible2=!1}}},[t._v("cancel")]),s("el-button",{attrs:{type:"primary",size:"mini"},on:{click:function(s){t.visible2=!1}}},[t._v("confirm")])],1)]),s("el-button",{directives:[{name:"popover",rawName:"v-popover:popover5",arg:"popover5"}]},[t._v("Delete")])],1),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-popover")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("ref")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"popover5"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placement")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"top"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("width")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"160"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"visible2"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("p")]),t._v(">")]),t._v("Are you sure to delete this?"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("p")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("style")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"text-align: right; margin: 0"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("size")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"mini"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("type")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"text"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@click")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"visible2 = false"')]),t._v(">")]),t._v("cancel"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("type")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"primary"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("size")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"mini"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@click")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"visible2 = false"')]),t._v(">")]),t._v("confirm"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-popover")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-popover:popover5")]),t._v(">")]),t._v("Delete"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("visible2")]),t._v(": "),s("span",{attrs:{class:"hljs-literal"}},[t._v("false")]),t._v(",\n };\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(5),t._m(6),t._m(7),t._m(8),t._m(9),t._m(10)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"popover"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#popover","aria-hidden":"true"}},[this._v("¶")]),this._v(" Popover")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"basic-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[s._v("Similar to Tooltip, Popover is also built with "),t("code",{pre:!0},[s._v("Vue-popper")]),s._v(". So for some duplicated attributes, please refer to the documentation of Tooltip.")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"nested-information"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#nested-information","aria-hidden":"true"}},[this._v("¶")]),this._v(" Nested information")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"nested-operation"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#nested-operation","aria-hidden":"true"}},[this._v("¶")]),this._v(" Nested operation")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("trigger")]),t("td",[s._v("how the popover is triggered")]),t("td",[s._v("string")]),t("td",[s._v("click/focus/hover/manual")]),t("td",[s._v("click")])]),t("tr",[t("td",[s._v("title")]),t("td",[s._v("popover title")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("content")]),t("td",[s._v("popover content, can be replaced with a default "),t("code",{pre:!0},[s._v("slot")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("width")]),t("td",[s._v("popover width")]),t("td",[s._v("string, number")]),t("td",[s._v("—")]),t("td",[s._v("Min width 150px")])]),t("tr",[t("td",[s._v("placement")]),t("td",[s._v("popover placement")]),t("td",[s._v("string")]),t("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),t("td",[s._v("bottom")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("whether Popover is disabled")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("value(v-model)")]),t("td",[s._v("whether popover is visible")]),t("td",[s._v("Boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("offset")]),t("td",[s._v("popover offset")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("transition")]),t("td",[s._v("popover transition animation")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("el-fade-in-linear")])]),t("tr",[t("td",[s._v("visible-arrow")]),t("td",[s._v("whether a tooltip arrow is displayed or not. For more info, please refer to "),t("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("popper-options")]),t("td",[s._v("parameters for "),t("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")])]),t("td",[s._v("object")]),t("td",[s._v("please refer to "),t("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")])]),t("td",[t("code",{pre:!0},[s._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),t("tr",[t("td",[s._v("popper-class")]),t("td",[s._v("custom class name for popover")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("open-delay")]),t("td",[s._v("delay of appearance when "),t("code",{pre:!0},[s._v("trigger")]),s._v(" is hover, in milliseconds")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"slot"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Name")]),t("th",[s._v("Description")])])]),t("tbody",[t("tr",[t("td",[s._v("—")]),t("td",[s._v("text content of popover")])]),t("tr",[t("td",[s._v("reference")]),t("td",[s._v("HTML element that triggers popover")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"events"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Event Name")]),t("th",[s._v("Description")]),t("th",[s._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[s._v("show")]),t("td",[s._v("triggers when popover shows")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("hide")]),t("td",[s._v("triggers when popover hides")]),t("td",[s._v("—")])])])])}],!1,null,null,null);t.default=a.exports},863:function(s,t,a){"use strict";a.r(t);var l={data:function(){return{value1:null,value2:null,value3:null,value4:null,value5:3.7}},mounted:function(){this.$nextTick(function(){document.querySelector(".source").style.padding="0"})}},a=(a(751),a(0)),a=Object(a.a)(l,function(){var t=this,s=t.$createElement,s=t._self._c||s;return s("section",[t._m(0),s("p",[t._v("Used for rating")]),t._m(1),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n <span class="demonstration">Default</span>\n <el-rate v-model="value1"></el-rate>\n</div>\n<div class="block">\n <span class="demonstration">Color for different levels</span>\n <el-rate v-model="value2" :colors="[\'#99A9BF\', \'#F7BA2A\', \'#FF9900\']">\n </el-rate>\n</div>\n\n\n',script:"\n export default {\n data: function() {\n return {\n value1: null,\n value2: null\n }\n }\n }\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("div",{staticClass:"block"},[s("span",{staticClass:"demonstration"},[t._v("Default")]),s("el-rate",{model:{value:t.value1,callback:function(s){t.value1=s},expression:"value1"}})],1),s("div",{staticClass:"block"},[s("span",{staticClass:"demonstration"},[t._v("Color for different levels")]),s("el-rate",{attrs:{colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:t.value2,callback:function(s){t.value2=s},expression:"value2"}})],1)]),s("p",[t._v("Rate divides rating scores into three levels and these levels can be distinguished by using different background colors. By default background colors are the same, but you can assign them to reflect three levels using the "),s("code",[t._v("colors")]),t._v(" attribute, and their two thresholds can be defined by "),s("code",[t._v("low-threshold")]),t._v(" and "),s("code",[t._v("high-threshold")]),t._v(".")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"demonstration"')]),t._v(">")]),t._v("Default"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-rate")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value1"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-rate")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"demonstration"')]),t._v(">")]),t._v("Color for different levels"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-rate")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value2"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":colors")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v("\"['#99A9BF', '#F7BA2A', '#FF9900']\"")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-rate")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value1")]),t._v(": "),s("span",{attrs:{class:"hljs-literal"}},[t._v("null")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value2")]),t._v(": "),s("span",{attrs:{class:"hljs-literal"}},[t._v("null")]),t._v("\n }\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(2),s("p",[t._v("Using text to indicate rating score")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"<el-rate v-model=\"value3\" :texts=\"['oops', 'disappointed', 'normal', 'good', 'great']\" show-text>\n</el-rate>\n\n\n",script:"\n export default {\n data: function() {\n return {\n value3: null\n }\n }\n }\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-rate",{attrs:{texts:["oops","disappointed","normal","good","great"],"show-text":""},model:{value:t.value3,callback:function(s){t.value3=s},expression:"value3"}})],1),s("p",[t._v("Add attribute "),s("code",[t._v("show-text")]),t._v(" to display text at the right of Rate. You can assign texts for different scores using "),s("code",[t._v("texts")]),t._v(". "),s("code",[t._v("texts")]),t._v(" is an array whose length should be equal to the max score "),s("code",[t._v("max")]),t._v(".")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-rate")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value3"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":texts")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v("\"['oops', 'disappointed', 'normal', 'good', 'great']\"")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("show-text")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-rate")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value3")]),t._v(": "),s("span",{attrs:{class:"hljs-literal"}},[t._v("null")]),t._v("\n }\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(3),s("p",[t._v("You can use different icons to distinguish different rate components.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"<el-rate v-model=\"value4\" :icon-classes=\"['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']\" void-icon-class=\"icon-rate-face-off\" :colors=\"['#99A9BF', '#F7BA2A', '#FF9900']\">\n</el-rate>\n\n\n",script:"\n export default {\n data: function() {\n return {\n value4: null\n }\n }\n }\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-rate",{attrs:{"icon-classes":["icon-rate-face-1","icon-rate-face-2","icon-rate-face-3"],"void-icon-class":"icon-rate-face-off",colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:t.value4,callback:function(s){t.value4=s},expression:"value4"}})],1),s("p",[t._v("You can customize icons for three different levels using "),s("code",[t._v("icon-classes")]),t._v(". In this example, we also use "),s("code",[t._v("void-icon-class")]),t._v(" to set the icon if it is unselected.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-rate")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value4"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":icon-classes")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v("\"['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']\"")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("void-icon-class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"icon-rate-face-off"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":colors")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v("\"['#99A9BF', '#F7BA2A', '#FF9900']\"")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-rate")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value4")]),t._v(": "),s("span",{attrs:{class:"hljs-literal"}},[t._v("null")]),t._v("\n }\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(4),s("p",[t._v("Read-only Rate is for displaying rating score. Half star is supported.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-rate v-model="value5" disabled show-text text-color="#ff9900" text-template="{value} points">\n</el-rate>\n\n\n',script:"\n export default {\n data: function() {\n return {\n value5: 3.7\n }\n }\n }\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-rate",{attrs:{disabled:"","show-text":"","text-color":"#ff9900","text-template":"{value} points"},model:{value:t.value5,callback:function(s){t.value5=s},expression:"value5"}})],1),s("p",[t._v("Use attribute "),s("code",[t._v("disabled")]),t._v(" to make the component read-only. Add "),s("code",[t._v("show-text")]),t._v(" to display the rating score at the right side. Additionally, you can use attribute "),s("code",[t._v("text-template")]),t._v(" to provide a text template. It must contain "),s("code",[t._v("{value}")]),t._v(", and "),s("code",[t._v("{value}")]),t._v(" will be replaced with the rating score.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-rate")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value5"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("disabled")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("show-text")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("text-color")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"#ff9900"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("text-template")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"{value} points"')]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-rate")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value5")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("3.7")]),t._v("\n }\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(5),t._m(6),t._m(7),t._m(8)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"rate"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#rate","aria-hidden":"true"}},[this._v("¶")]),this._v(" Rate")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"basic-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"with-text"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#with-text","aria-hidden":"true"}},[this._v("¶")]),this._v(" With text")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"more-icons"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#more-icons","aria-hidden":"true"}},[this._v("¶")]),this._v(" More icons")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"read-only"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#read-only","aria-hidden":"true"}},[this._v("¶")]),this._v(" Read-only")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("max")]),t("td",[s._v("max rating score")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("5")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("whether Rate is read-only")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("allow-half")]),t("td",[s._v("whether picking half start is allowed")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("low-threshold")]),t("td",[s._v("threshold value between low and medium level. The value itself will be included in low level")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("2")])]),t("tr",[t("td",[s._v("high-threshold")]),t("td",[s._v("threshold value between medium and high level. The value itself will be included in high level")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("4")])]),t("tr",[t("td",[s._v("colors")]),t("td",[s._v("color array for icons. It should have 3 elements, each of which corresponds with a score level")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("['#F7BA2A', '#F7BA2A', '#F7BA2A']")])]),t("tr",[t("td",[s._v("void-color")]),t("td",[s._v("color of unselected icons")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#C6D1DE")])]),t("tr",[t("td",[s._v("disabled-void-color")]),t("td",[s._v("color of unselected read-only icons")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#EFF2F7")])]),t("tr",[t("td",[s._v("icon-classes")]),t("td",[s._v("array of class names of icons. It should have 3 elements, each of which corresponds with a score level")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']")])]),t("tr",[t("td",[s._v("void-icon-class")]),t("td",[s._v("class name of unselected icons")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("el-icon-star-off")])]),t("tr",[t("td",[s._v("disabled-void-icon-class")]),t("td",[s._v("class name of unselected read-only icons")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("el-icon-star-on")])]),t("tr",[t("td",[s._v("show-text")]),t("td",[s._v("whether to display texts")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("text-color")]),t("td",[s._v("color of texts")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#1F2D3D")])]),t("tr",[t("td",[s._v("texts")]),t("td",[s._v("text array")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("['极差', '失望', '一般', '满意', '惊喜']")])]),t("tr",[t("td",[s._v("text-template")]),t("td",[s._v("text template when the component is read-only")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("{value}")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"events"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Event Name")]),t("th",[s._v("Description")]),t("th",[s._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("Triggers when rate value is changed")]),t("td",[s._v("value after changing")])])])])}],!1,null,null,null);t.default=a.exports},864:function(s,t,a){"use strict";a.r(t);var l={data:function(){return{list:null,options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],options2:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2",disabled:!0},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],options3:[{label:"Popular cities",options:[{value:"Shanghai",label:"Shanghai"},{value:"Beijing",label:"Beijing"}]},{label:"City Name",options:[{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"},{value:"Dalian",label:"Dalian"}]}],options4:[],options5:[{value:"HTML",label:"HTML"},{value:"CSS",label:"CSS"},{value:"JavaScript",label:"JavaScript"}],cities:[{value:"Beijing",label:"Beijing"},{value:"Shanghai",label:"Shanghai"},{value:"Nanjing",label:"Nanjing"},{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"}],value:"",value2:"",value3:"",value4:"",value5:[],value6:"",value7:"",value8:"",value9:[],value10:[],loading:!1,states:["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]}},mounted:function(){this.list=this.states.map(function(s){return{value:s,label:s}})},methods:{remoteMethod:function(t){var s=this;""!==t?(s.loading=!0,setTimeout(function(){s.loading=!1,s.options4=s.list.filter(function(s){return-1<s.label.toLowerCase().indexOf(t.toLowerCase())})},200)):s.options4=[]}}},a=(a(752),a(0)),a=Object(a.a)(l,function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("section",[t._m(0),a("p",[t._v("When there are plenty of options, use a drop-down menu to display and select desired ones.")]),t._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-select v-model="value" placeholder="Select">\n <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">\n </el-option>\n </el-select>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n return {\n options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{placeholder:"Select"},model:{value:t.value,callback:function(s){t.value=s},expression:"value"}},t._l(t.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[a("code",[t._v("v-model")]),t._v(" is the value of "),a("code",[t._v("el-option")]),t._v(" that is currently selected.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-select")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"value"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"Select"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-option")]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-for")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item in options"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":key")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item.value"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":label")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item.label"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":value")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item.value"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-option")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-select")]),t._v(">")]),t._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),a("span",{attrs:{class:"javascript"}},[t._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),a("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("options")]),t._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option1'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option1'")]),t._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option2'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option2'")]),t._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option3'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option3'")]),t._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option4'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option4'")]),t._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option5'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option5'")]),t._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v("\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-select v-model="value2" placeholder="Select">\n <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled">\n </el-option>\n </el-select>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n return {\n options2: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2',\n disabled: true\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value2: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{placeholder:"Select"},model:{value:t.value2,callback:function(s){t.value2=s},expression:"value2"}},t._l(t.options2,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value,disabled:s.disabled}})}))]],2),a("p",[t._v("Set the value of "),a("code",[t._v("disabled")]),t._v(" in "),a("code",[t._v("el-option")]),t._v(" to "),a("code",[t._v("true")]),t._v(" to disable this option.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-select")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"value2"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"Select"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-option")]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-for")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item in options2"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":key")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item.value"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":label")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item.label"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":value")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item.value"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":disabled")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item.disabled"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-option")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-select")]),t._v(">")]),t._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),a("span",{attrs:{class:"javascript"}},[t._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),a("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("options2")]),t._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option1'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option1'")]),t._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option2'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option2'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("disabled")]),t._v(": "),a("span",{attrs:{class:"hljs-literal"}},[t._v("true")]),t._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option3'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option3'")]),t._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option4'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option4'")]),t._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option5'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option5'")]),t._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value2")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v("\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(3),a("p",[t._v("Disable the whole component.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-select v-model="value3" disabled placeholder="Select">\n <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">\n </el-option>\n </el-select>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n return {\n options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value3: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{disabled:"",placeholder:"Select"},model:{value:t.value3,callback:function(s){t.value3=s},expression:"value3"}},t._l(t.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[t._v("Set "),a("code",[t._v("disabled")]),t._v(" of "),a("code",[t._v("el-select")]),t._v(" to make it disabled.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-select")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"value3"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("disabled")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"Select"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-option")]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-for")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item in options"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":key")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item.value"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":label")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item.label"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":value")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item.value"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-option")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-select")]),t._v(">")]),t._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),a("span",{attrs:{class:"javascript"}},[t._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),a("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("options")]),t._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option1'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option1'")]),t._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option2'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option2'")]),t._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option3'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option3'")]),t._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option4'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option4'")]),t._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option5'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option5'")]),t._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value3")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v("\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(4),a("p",[t._v("You can clear Select using a clear icon.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-select v-model="value4" clearable placeholder="Select">\n <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">\n </el-option>\n </el-select>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n return {\n options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value4: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{clearable:"",placeholder:"Select"},model:{value:t.value4,callback:function(s){t.value4=s},expression:"value4"}},t._l(t.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[t._v("Set "),a("code",[t._v("clearable")]),t._v(" attribute for "),a("code",[t._v("el-select")]),t._v(" and a clear icon will appear. Note that "),a("code",[t._v("clearable")]),t._v(" is only for single select.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-select")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"value4"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("clearable")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"Select"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-option")]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-for")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item in options"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":key")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item.value"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":label")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item.label"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":value")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item.value"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-option")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-select")]),t._v(">")]),t._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),a("span",{attrs:{class:"javascript"}},[t._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),a("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("options")]),t._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option1'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option1'")]),t._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option2'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option2'")]),t._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option3'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option3'")]),t._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option4'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option4'")]),t._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option5'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option5'")]),t._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value4")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v("\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(5),a("p",[t._v("Multiple select uses tags to display selected options.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-select v-model="value5" multiple placeholder="Select">\n <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">\n </el-option>\n </el-select>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n return {\n options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value5: []\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{multiple:"",placeholder:"Select"},model:{value:t.value5,callback:function(s){t.value5=s},expression:"value5"}},t._l(t.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[t._v("Set "),a("code",[t._v("multiple")]),t._v(" attribute for "),a("code",[t._v("el-select")]),t._v(" to enable multiple mode. In this case, the value of "),a("code",[t._v("v-model")]),t._v(" will be an array of selected options.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-select")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"value5"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("multiple")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"Select"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-option")]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-for")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item in options"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":key")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item.value"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":label")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item.label"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":value")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item.value"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-option")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-select")]),t._v(">")]),t._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),a("span",{attrs:{class:"javascript"}},[t._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),a("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("options")]),t._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option1'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option1'")]),t._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option2'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option2'")]),t._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option3'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option3'")]),t._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option4'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option4'")]),t._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option5'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option5'")]),t._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value5")]),t._v(": []\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(6),a("p",[t._v("You can customize HTML templates for options.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-select v-model="value6" placeholder="Select">\n <el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value">\n <span style="float: left">{{ item.label }}</span>\n <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>\n </el-option>\n </el-select>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n return {\n cities: [{\n value: 'Beijing',\n label: 'Beijing'\n }, {\n value: 'Shanghai',\n label: 'Shanghai'\n }, {\n value: 'Nanjing',\n label: 'Nanjing'\n }, {\n value: 'Chengdu',\n label: 'Chengdu'\n }, {\n value: 'Shenzhen',\n label: 'Shenzhen'\n }, {\n value: 'Guangzhou',\n label: 'Guangzhou'\n }],\n value6: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{placeholder:"Select"},model:{value:t.value6,callback:function(s){t.value6=s},expression:"value6"}},t._l(t.cities,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}},[a("span",{staticStyle:{float:"left"}},[t._v(t._s(s.label))]),a("span",{staticStyle:{float:"right",color:"#8492a6","font-size":"13px"}},[t._v(t._s(s.value))])])}))]],2),a("p",[t._v("Insert customized HTML templates into the slot of "),a("code",[t._v("el-option")]),t._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-select")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"value6"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"Select"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-option")]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-for")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item in cities"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":key")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item.value"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":label")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item.label"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":value")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item.value"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("style")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"float: left"')]),t._v(">")]),t._v("{{ item.label }}"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("style")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"float: right; color: #8492a6; font-size: 13px"')]),t._v(">")]),t._v("{{ item.value }}"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-option")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-select")]),t._v(">")]),t._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),a("span",{attrs:{class:"javascript"}},[t._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),a("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("cities")]),t._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Beijing'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Beijing'")]),t._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Shanghai'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Shanghai'")]),t._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Nanjing'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Nanjing'")]),t._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Chengdu'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Chengdu'")]),t._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Shenzhen'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Shenzhen'")]),t._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Guangzhou'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Guangzhou'")]),t._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value6")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v("\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(7),a("p",[t._v("Display options in groups.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-select v-model="value7" placeholder="Select">\n <el-option-group v-for="group in options3" :key="group.label" :label="group.label">\n <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">\n </el-option>\n </el-option-group>\n </el-select>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n return {\n options3: [{\n label: 'Popular cities',\n options: [{\n value: 'Shanghai',\n label: 'Shanghai'\n }, {\n value: 'Beijing',\n label: 'Beijing'\n }]\n }, {\n label: 'City name',\n options: [{\n value: 'Chengdu',\n label: 'Chengdu'\n }, {\n value: 'Shenzhen',\n label: 'Shenzhen'\n }, {\n value: 'Guangzhou',\n label: 'Guangzhou'\n }, {\n value: 'Dalian',\n label: 'Dalian'\n }]\n }],\n value7: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{placeholder:"Select"},model:{value:t.value7,callback:function(s){t.value7=s},expression:"value7"}},t._l(t.options3,function(s){return a("el-option-group",{key:s.label,attrs:{label:s.label}},t._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))}))]],2),a("p",[t._v("Use "),a("code",[t._v("el-option-group")]),t._v(" to group the options, and its "),a("code",[t._v("label")]),t._v(" attribute stands for the name of the group.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-select")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"value7"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"Select"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-option-group")]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-for")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"group in options3"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":key")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"group.label"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":label")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"group.label"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-option")]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-for")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item in group.options"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":key")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item.value"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":label")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item.label"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":value")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item.value"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-option")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-option-group")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-select")]),t._v(">")]),t._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),a("span",{attrs:{class:"javascript"}},[t._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),a("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("options3")]),t._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Popular cities'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("options")]),t._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Shanghai'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Shanghai'")]),t._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Beijing'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Beijing'")]),t._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'City name'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("options")]),t._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Chengdu'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Chengdu'")]),t._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Shenzhen'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Shenzhen'")]),t._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Guangzhou'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Guangzhou'")]),t._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Dalian'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Dalian'")]),t._v("\n }]\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value7")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v("\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(8),a("p",[t._v("You can filter options for your desired ones.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-select v-model="value8" filterable placeholder="Select">\n <el-option v-for="item in options" highlight :key="item.value" :label="item.label" :value="item.value">\n </el-option>\n </el-select>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n return {\n options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value8: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{filterable:"",placeholder:"Select"},model:{value:t.value8,callback:function(s){t.value8=s},expression:"value8"}},t._l(t.options,function(s){return a("el-option",{key:s.value,attrs:{highlight:"",label:s.label,value:s.value}})}))]],2),a("p",[t._v("Adding "),a("code",[t._v("filterable")]),t._v(" to "),a("code",[t._v("el-select")]),t._v(" enables filtering. By default, Select will find all the options whose "),a("code",[t._v("label")]),t._v(" attribute contains the input value. If you prefer other filtering strategies, you can pass the "),a("code",[t._v("filter-method")]),t._v(". "),a("code",[t._v("filter-method")]),t._v(" is a "),a("code",[t._v("Function")]),t._v(" that gets called when the input value changes, and its parameter is the current input value. Adding "),a("code",[t._v("highlight")]),t._v(" to "),a("code",[t._v("yu-option")]),t._v(" highlight the search word.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-select")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"value8"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("filterable")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"Select"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-option")]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-for")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item in options"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("highlight")]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":key")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item.value"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":label")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item.label"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":value")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item.value"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-option")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-select")]),t._v(">")]),t._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),a("span",{attrs:{class:"javascript"}},[t._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),a("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("options")]),t._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option1'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option1'")]),t._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option2'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option2'")]),t._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option3'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option3'")]),t._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option4'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option4'")]),t._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option5'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option5'")]),t._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value8")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v("\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(9),a("p",[t._v("Enter keywords and search data from server.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-select v-model="value9" multiple filterable remote placeholder="Please enter a keyword" :remote-method="remoteMethod" :loading="loading">\n <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value">\n </el-option>\n </el-select>\n</template>\n\n\n',script:'\n export default {\n data: function() {\n return {\n options4: [],\n value9: [],\n list: [],\n loading: false,\n states: ["Alabama", "Alaska", "Arizona",\n "Arkansas", "California", "Colorado",\n "Connecticut", "Delaware", "Florida",\n "Georgia", "Hawaii", "Idaho", "Illinois",\n "Indiana", "Iowa", "Kansas", "Kentucky",\n "Louisiana", "Maine", "Maryland",\n "Massachusetts", "Michigan", "Minnesota",\n "Mississippi", "Missouri", "Montana",\n "Nebraska", "Nevada", "New Hampshire",\n "New Jersey", "New Mexico", "New York",\n "North Carolina", "North Dakota", "Ohio",\n "Oklahoma", "Oregon", "Pennsylvania",\n "Rhode Island", "South Carolina",\n "South Dakota", "Tennessee", "Texas",\n "Utah", "Vermont", "Virginia",\n "Washington", "West Virginia", "Wisconsin",\n "Wyoming"]\n }\n },\n mounted: function() {\n this.list = this.states.map(function(item) {\n return { value: item, label: item };\n });\n },\n methods: {\n remoteMethod: function(query) {\n var _this = this;\n if (query !== \'\') {\n _this.loading = true;\n setTimeout(function() {\n _this.loading = false;\n _this.options4 = _this.list.filter(function(item) {\n return item.label.toLowerCase()\n .indexOf(query.toLowerCase()) > -1;\n });\n }, 200);\n } else {\n _this.options4 = [];\n }\n }\n }\n }\n',style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{multiple:"",filterable:"",remote:"",placeholder:"Please enter a keyword","remote-method":t.remoteMethod,loading:t.loading},model:{value:t.value9,callback:function(s){t.value9=s},expression:"value9"}},t._l(t.options4,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[t._v("Set the value of "),a("code",[t._v("filterable")]),t._v(" and "),a("code",[t._v("remote")]),t._v(" with "),a("code",[t._v("true")]),t._v(" to enable remote search, and you should pass the "),a("code",[t._v("remote-method")]),t._v(". "),a("code",[t._v("remote-method")]),t._v(" is a "),a("code",[t._v("Function")]),t._v(" that gets called when the input value changes, and its parameter is the current input value. Note that if "),a("code",[t._v("el-option")]),t._v(" is rendered with the "),a("code",[t._v("v-for")]),t._v(" directive, you should add the "),a("code",[t._v("key")]),t._v(" attribute for "),a("code",[t._v("el-option")]),t._v(". Its value needs to be unique, such as "),a("code",[t._v("item.value")]),t._v(" in the following example.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-select")]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"value9"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("multiple")]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("filterable")]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("remote")]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"Please enter a keyword"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":remote-method")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"remoteMethod"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":loading")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"loading"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-option")]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-for")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item in options4"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":key")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item.value"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":label")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item.label"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":value")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item.value"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-option")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-select")]),t._v(">")]),t._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),a("span",{attrs:{class:"javascript"}},[t._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),a("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("options4")]),t._v(": [],\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value9")]),t._v(": [],\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("list")]),t._v(": [],\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("loading")]),t._v(": "),a("span",{attrs:{class:"hljs-literal"}},[t._v("false")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("states")]),t._v(": ["),a("span",{attrs:{class:"hljs-string"}},[t._v('"Alabama"')]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Alaska"')]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Arizona"')]),t._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Arkansas"')]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v('"California"')]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Colorado"')]),t._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Connecticut"')]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Delaware"')]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Florida"')]),t._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Georgia"')]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Hawaii"')]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Idaho"')]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Illinois"')]),t._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Indiana"')]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Iowa"')]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Kansas"')]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Kentucky"')]),t._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Louisiana"')]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Maine"')]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Maryland"')]),t._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Massachusetts"')]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Michigan"')]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Minnesota"')]),t._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Mississippi"')]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Missouri"')]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Montana"')]),t._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Nebraska"')]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Nevada"')]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v('"New Hampshire"')]),t._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[t._v('"New Jersey"')]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v('"New Mexico"')]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v('"New York"')]),t._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[t._v('"North Carolina"')]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v('"North Dakota"')]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Ohio"')]),t._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Oklahoma"')]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Oregon"')]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Pennsylvania"')]),t._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Rhode Island"')]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v('"South Carolina"')]),t._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[t._v('"South Dakota"')]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Tennessee"')]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Texas"')]),t._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Utah"')]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Vermont"')]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Virginia"')]),t._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Washington"')]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v('"West Virginia"')]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Wisconsin"')]),t._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[t._v('"Wyoming"')]),t._v("]\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("mounted")]),t._v(": "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),a("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".list = "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".states.map("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),a("span",{attrs:{class:"hljs-params"}},[t._v("item")]),t._v(") ")]),t._v("{\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" { "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": item, "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": item };\n });\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("methods")]),t._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("remoteMethod")]),t._v(": "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),a("span",{attrs:{class:"hljs-params"}},[t._v("query")]),t._v(") ")]),t._v("{\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" _this = "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(";\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("if")]),t._v(" (query !== "),a("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v(") {\n _this.loading = "),a("span",{attrs:{class:"hljs-literal"}},[t._v("true")]),t._v(";\n setTimeout("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),a("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n _this.loading = "),a("span",{attrs:{class:"hljs-literal"}},[t._v("false")]),t._v(";\n _this.options4 = _this.list.filter("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),a("span",{attrs:{class:"hljs-params"}},[t._v("item")]),t._v(") ")]),t._v("{\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" item.label.toLowerCase()\n .indexOf(query.toLowerCase()) > "),a("span",{attrs:{class:"hljs-number"}},[t._v("-1")]),t._v(";\n });\n }, "),a("span",{attrs:{class:"hljs-number"}},[t._v("200")]),t._v(");\n } "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("else")]),t._v(" {\n _this.options4 = [];\n }\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(10),a("p",[t._v("Create and select new items that are not included in select options")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-select v-model="value10" multiple filterable allow-create placeholder="Choose tags for your article">\n <el-option v-for="item in options5" :key="item.value" :label="item.label" :value="item.value">\n </el-option>\n </el-select>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n return {\n options5: [{\n value: 'HTML',\n label: 'HTML'\n }, {\n value: 'CSS',\n label: 'CSS'\n }, {\n value: 'JavaScript',\n label: 'JavaScript'\n }],\n value10: []\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{multiple:"",filterable:"","allow-create":"",placeholder:"Choose tags for your article"},model:{value:t.value10,callback:function(s){t.value10=s},expression:"value10"}},t._l(t.options5,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[t._v("By using the "),a("code",[t._v("allow-create")]),t._v(" attribute, users can create new items by typing in the input box. Note that for "),a("code",[t._v("allow-create")]),t._v(" to work, "),a("code",[t._v("filterable")]),t._v(" must be "),a("code",[t._v("true")]),t._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-select")]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"value10"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("multiple")]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("filterable")]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("allow-create")]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"Choose tags for your article"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-option")]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-for")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item in options5"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":key")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item.value"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":label")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item.label"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":value")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"item.value"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-option")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-select")]),t._v(">")]),t._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),a("span",{attrs:{class:"javascript"}},[t._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),a("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("options5")]),t._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'HTML'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'HTML'")]),t._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'CSS'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'CSS'")]),t._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'JavaScript'")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),a("span",{attrs:{class:"hljs-string"}},[t._v("'JavaScript'")]),t._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("value10")]),t._v(": []\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(11),t._m(12),t._m(13),t._m(14),t._m(15),t._m(16),t._m(17),t._m(18),t._m(19)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"select"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"basic-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"disabled-option"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#disabled-option","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled option")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"disabled-select"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#disabled-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled select")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"clearable-single-select"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#clearable-single-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Clearable single select")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"basic-multiple-select"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-multiple-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic multiple select")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"custom-template"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#custom-template","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom template")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"grouping"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#grouping","aria-hidden":"true"}},[this._v("¶")]),this._v(" Grouping")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"option-filtering"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#option-filtering","aria-hidden":"true"}},[this._v("¶")]),this._v(" Option filtering")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"remote-search"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#remote-search","aria-hidden":"true"}},[this._v("¶")]),this._v(" Remote Search")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"create-new-items"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#create-new-items","aria-hidden":"true"}},[this._v("¶")]),this._v(" Create new items")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("div",{staticClass:"tip"},[t("p",[s._v("If the binding value of Select is an object, make sure to assign "),t("code",{pre:!0},[s._v("value-key")]),s._v(" as its unique identity key name.")])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"select-attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#select-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("multiple")]),t("td",[s._v("whether multiple-select is activated")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("whether Select is disabled")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("value-key")]),t("td",[s._v("unique identity key name for value, required when value is an object")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("value")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("size of Input")]),t("td",[s._v("string")]),t("td",[s._v("large/small/mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("clearable")]),t("td",[s._v("whether single select can be cleared")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("multiple-limit")]),t("td",[s._v("maximum number of options user can select when "),t("code",{pre:!0},[s._v("multiple")]),s._v(" is "),t("code",{pre:!0},[s._v("true")]),s._v(". No limit when set to 0")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("the name attribute of select input")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("placeholder")]),t("td",[s._v("placeholder")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("Select")])]),t("tr",[t("td",[s._v("filterable")]),t("td",[s._v("whether Select is filterable")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("allow-create")]),t("td",[s._v("whether creating new items is allowed. To use this, "),t("code",{pre:!0},[s._v("filterable")]),s._v(" must be true")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("filter-method")]),t("td",[s._v("custom filter method")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("remote")]),t("td",[s._v("whether options are loaded from server")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("remote-method")]),t("td",[s._v("custom remote search method")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("loading")]),t("td",[s._v("whether Select is loading data from server")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("loading-text")]),t("td",[s._v("displayed text while loading data from server")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("Loading")])]),t("tr",[t("td",[s._v("no-match-text")]),t("td",[s._v("displayed text when no data matches the filtering query")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("No matching data")])]),t("tr",[t("td",[s._v("no-data-text")]),t("td",[s._v("displayed text when there is no options")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("No data")])]),t("tr",[t("td",[s._v("popper-class")]),t("td",[s._v("custom class name for Select's dropdown")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("default-first-option")]),t("td",[s._v("select first matching option on enter key. Use with "),t("code",{pre:!0},[s._v("filterable")]),s._v(" or "),t("code",{pre:!0},[s._v("remote")])]),t("td",[s._v("boolean")]),t("td",[s._v("-")]),t("td",[s._v("false")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"select-events"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#select-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select Events")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Event Name")]),t("th",[s._v("Description")]),t("th",[s._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("triggers when the selected value changes")]),t("td",[s._v("current selected value")])]),t("tr",[t("td",[s._v("visible-change")]),t("td",[s._v("triggers when the dropdown appears/disappears")]),t("td",[s._v("true when it appears, and false otherwise")])]),t("tr",[t("td",[s._v("remove-tag")]),t("td",[s._v("triggers when a tag is removed in multiple mode")]),t("td",[s._v("removed tag value")])]),t("tr",[t("td",[s._v("clear")]),t("td",[s._v("triggers when the clear icon is clicked in a clearable Select")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"option-group-attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#option-group-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Option Group Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("label")]),t("td",[s._v("name of the group")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("whether to disable all options in this group")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"option-attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#option-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Option Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("value")]),t("td",[s._v("value of option")]),t("td",[s._v("string/number/object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("label")]),t("td",[s._v("label of option, same as "),t("code",{pre:!0},[s._v("value")]),s._v(" if omitted")]),t("td",[s._v("string/number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("whether option is disabled")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("highlight")]),t("td",[s._v("whether highlight the search word when the select is filterable")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])}],!1,null,null,null);t.default=a.exports},865:function(s,t,a){"use strict";a.r(t);var l={data:function(){return{value1:0,value2:50,value3:36,value4:48,value5:42,value6:0,value7:0,value8:0,value9:[4,8],value10:0}},methods:{formatTooltip:function(s){return s/100}}},a=a(0),a=Object(a.a)(l,function(){var t=this,s=t.$createElement,s=t._self._c||s;return s("section",[t._m(0),s("p",[t._v("Drag the slider within a fixed range.")]),t._m(1),s("p",[t._v("The current value is displayed when the slider is being dragged.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div class="block">\n <span class="demonstration">Default value</span>\n <el-slider v-model="value1"></el-slider>\n </div>\n <div class="block">\n <span class="demonstration">Customized initial value</span>\n <el-slider v-model="value2"></el-slider>\n </div>\n <div class="block">\n <span class="demonstration">Hide Tooltip</span>\n <el-slider v-model="value3" :show-tooltip="false"></el-slider>\n </div>\n <div class="block">\n <span class="demonstration">Format Tooltip</span>\n <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>\n </div>\n <div class="block">\n <span class="demonstration">Disabled</span>\n <el-slider v-model="value5" disabled></el-slider>\n </div>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n return {\n value1: 0,\n value2: 50,\n value3: 36,\n value4: 48,\n value5: 42\n }\n },\n methods: {\n formatTooltip: function(val) {\n return val / 100;\n }\n }\n }\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[s("div",{staticClass:"block"},[s("span",{staticClass:"demonstration"},[t._v("Default value")]),s("el-slider",{model:{value:t.value1,callback:function(s){t.value1=s},expression:"value1"}})],1),s("div",{staticClass:"block"},[s("span",{staticClass:"demonstration"},[t._v("Customized initial value")]),s("el-slider",{model:{value:t.value2,callback:function(s){t.value2=s},expression:"value2"}})],1),s("div",{staticClass:"block"},[s("span",{staticClass:"demonstration"},[t._v("Hide Tooltip")]),s("el-slider",{attrs:{"show-tooltip":!1},model:{value:t.value3,callback:function(s){t.value3=s},expression:"value3"}})],1),s("div",{staticClass:"block"},[s("span",{staticClass:"demonstration"},[t._v("Format Tooltip")]),s("el-slider",{attrs:{"format-tooltip":t.formatTooltip},model:{value:t.value4,callback:function(s){t.value4=s},expression:"value4"}})],1),s("div",{staticClass:"block"},[s("span",{staticClass:"demonstration"},[t._v("Disabled")]),s("el-slider",{attrs:{disabled:""},model:{value:t.value5,callback:function(s){t.value5=s},expression:"value5"}})],1)]],2),s("p",[t._v("Customize the initial value of the slider by setting the binding value.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"demonstration"')]),t._v(">")]),t._v("Default value"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-slider")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value1"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-slider")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"demonstration"')]),t._v(">")]),t._v("Customized initial value"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-slider")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value2"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-slider")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"demonstration"')]),t._v(">")]),t._v("Hide Tooltip"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-slider")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value3"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":show-tooltip")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"false"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-slider")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"demonstration"')]),t._v(">")]),t._v("Format Tooltip"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-slider")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value4"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":format-tooltip")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"formatTooltip"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-slider")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"demonstration"')]),t._v(">")]),t._v("Disabled"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-slider")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value5"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("disabled")]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-slider")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value1")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("0")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value2")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("50")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value3")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("36")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value4")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("48")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value5")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("42")]),t._v("\n }\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("methods")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("formatTooltip")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("val")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" val / "),s("span",{attrs:{class:"hljs-number"}},[t._v("100")]),t._v(";\n }\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(2),s("p",[t._v("The options can be discrete.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div class="block">\n <span class="demonstration">Breakpoints not displayed</span>\n <el-slider v-model="value6" :step="10">\n </el-slider>\n </div>\n <div class="block">\n <span class="demonstration">Breakpoints displayed</span>\n <el-slider v-model="value7" :step="10" show-stops>\n </el-slider>\n </div>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n value6: 0,\n value7: 0\n }\n }\n }\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[s("div",{staticClass:"block"},[s("span",{staticClass:"demonstration"},[t._v("Breakpoints not displayed")]),s("el-slider",{attrs:{step:10},model:{value:t.value6,callback:function(s){t.value6=s},expression:"value6"}})],1),s("div",{staticClass:"block"},[s("span",{staticClass:"demonstration"},[t._v("Breakpoints displayed")]),s("el-slider",{attrs:{step:10,"show-stops":""},model:{value:t.value7,callback:function(s){t.value7=s},expression:"value7"}})],1)]],2),s("p",[t._v("Set step size with the "),s("code",[t._v("step")]),t._v(" attribute. You can display breakpoints by setting the "),s("code",[t._v("show-stops")]),t._v(" attribute.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"demonstration"')]),t._v(">")]),t._v("Breakpoints not displayed"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-slider")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value6"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":step")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"10"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-slider")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"demonstration"')]),t._v(">")]),t._v("Breakpoints displayed"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-slider")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value7"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":step")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"10"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("show-stops")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-slider")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n data() {\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value6")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("0")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value7")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("0")]),t._v("\n }\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(3),s("p",[t._v("Set value via a input box.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div class="block">\n <el-slider v-model="value8" show-input>\n </el-slider>\n </div>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n return {\n value8: 0\n }\n }\n }\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[s("div",{staticClass:"block"},[s("el-slider",{attrs:{"show-input":""},model:{value:t.value8,callback:function(s){t.value8=s},expression:"value8"}})],1)]],2),s("p",[t._v("Set the "),s("code",[t._v("show-input")]),t._v(" attribute to display an input box on the right.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-slider")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value8"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("show-input")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-slider")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value8")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("0")]),t._v("\n }\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(4),s("p",[t._v("Selecting a range of values is supported.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div class="block">\n <el-slider v-model="value9" range show-stops :max="10">\n </el-slider>\n </div>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n return {\n value9: [4, 8]\n }\n }\n }\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[s("div",{staticClass:"block"},[s("el-slider",{attrs:{range:"","show-stops":"",max:10},model:{value:t.value9,callback:function(s){t.value9=s},expression:"value9"}})],1)]],2),s("p",[t._v("Setting the "),s("code",[t._v("range")]),t._v(" attribute activates range mode, where the binding value is an array made up of two boundary values.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-slider")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value9"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("range")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("show-stops")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":max")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"10"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-slider")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value9")]),t._v(": ["),s("span",{attrs:{class:"hljs-number"}},[t._v("4")]),t._v(", "),s("span",{attrs:{class:"hljs-number"}},[t._v("8")]),t._v("]\n }\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(5),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div class="block">\n <el-slider v-model="value10" vertical height="200px">\n </el-slider>\n </div>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n return {\n value10: 0\n }\n }\n }\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[s("div",{staticClass:"block"},[s("el-slider",{attrs:{vertical:"",height:"200px"},model:{value:t.value10,callback:function(s){t.value10=s},expression:"value10"}})],1)]],2),s("p",[t._v("Setting the "),s("code",[t._v("vertical")]),t._v(" attribute to "),s("code",[t._v("true")]),t._v(" enables vertical mode. In vertical mode, the "),s("code",[t._v("height")]),t._v(" attribute is required.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-slider")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value10"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("vertical")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("height")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"200px"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-slider")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value10")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("0")]),t._v("\n }\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(6),t._m(7),t._m(8),t._m(9)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"slider"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#slider","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slider")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"basic-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"discrete-values"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#discrete-values","aria-hidden":"true"}},[this._v("¶")]),this._v(" Discrete values")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"slider-with-input-box"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#slider-with-input-box","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slider with input box")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"range-selection"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#range-selection","aria-hidden":"true"}},[this._v("¶")]),this._v(" Range selection")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"vertical-mode"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#vertical-mode","aria-hidden":"true"}},[this._v("¶")]),this._v(" Vertical mode")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("min")]),t("td",[s._v("minimum value")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("max")]),t("td",[s._v("maximum value")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("100")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("whether Slider is disabled")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("step")]),t("td",[s._v("step size")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("1")])]),t("tr",[t("td",[s._v("show-input")]),t("td",[s._v("whether to display an input box, works when "),t("code",{pre:!0},[s._v("range")]),s._v(" is false")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("show-input-controls")]),t("td",[s._v("whether to display control buttons when "),t("code",{pre:!0},[s._v("show-input")]),s._v(" is true")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("show-stops")]),t("td",[s._v("whether to display breakpoints")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("show-tooltip")]),t("td",[s._v("whether to display tooltip value")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("format-tooltip")]),t("td",[s._v("format to display tooltip value")]),t("td",[s._v("Function(value)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("range")]),t("td",[s._v("whether to select a range")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("vertical")]),t("td",[s._v("vertical mode")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("height")]),t("td",[s._v("Slider height, required in vertical mode")]),t("td",[s._v("String")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("debounce")]),t("td",[s._v("debounce delay when typing, in millisecond, works when "),t("code",{pre:!0},[s._v("show-input")]),s._v(" is true")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("300")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"events"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Event Name")]),t("th",[s._v("Description")]),t("th",[s._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("triggers when the value changes (if the mouse is being dragged, this event only fires when the mouse is released)")]),t("td",[s._v("value after changing")])])])])}],!1,null,null,null);t.default=a.exports},866:function(s,t,a){"use strict";a.r(t);var l={data:function(){return{active:0}},methods:{next:function(){2<this.active++&&(this.active=0)}}},a=a(0),a=Object(a.a)(l,function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("section",[s._m(0),t("p",[s._v("Guide the user to complete tasks in accordance with the process. Its steps can be set according to the actual application scenario and the number of the steps can't be less than 2.")]),s._m(1),t("p",[s._v("Simple step bar.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-steps :space="100" :active="active" finish-status="success">\n <el-step title="Step 1"></el-step>\n <el-step title="Step 2"></el-step>\n <el-step title="Step 3"></el-step>\n</el-steps>\n\n<el-button style="margin-top: 12px;" @click="next">Next step</el-button>\n\n\n',script:"\n export default {\n data: function() {\n return {\n active: 0\n };\n },\n\n methods: {\n next: function() {\n if (this.active++ > 2) this.active = 0;\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-steps",{attrs:{space:100,active:s.active,"finish-status":"success"}},[t("el-step",{attrs:{title:"Step 1"}}),t("el-step",{attrs:{title:"Step 2"}}),t("el-step",{attrs:{title:"Step 3"}})],1),t("el-button",{staticStyle:{"margin-top":"12px"},on:{click:s.next}},[s._v("Next step")])],1),t("p",[s._v("Set "),t("code",[s._v("active")]),s._v(" attribute with "),t("code",[s._v("Number")]),s._v(" type, which indicates the index of steps and starts from 0. You can set "),t("code",[s._v("space")]),s._v(" attribute when the width of the step needs to be fixed which accepts "),t("code",[s._v("Boolean")]),s._v(" type. The unit of the "),t("code",[s._v("space")]),s._v(" attribute is "),t("code",[s._v("px")]),s._v(". If not set, it is responsive. Setting the "),t("code",[s._v("finish-status")]),s._v(" attribute can change the state of the steps that have been completed.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":space")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"active"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("finish-status")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 1"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 2"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(">")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 12px;"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"next"')]),s._v(">")]),s._v("Next step"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}}),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("active")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n };\n },\n\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("next")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}}),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" ("),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".active++ > "),t("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(") "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".active = "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Shows the status of the step for each step.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-steps :space="100" :active="1" finish-status="success">\n <el-step title="Done"></el-step>\n <el-step title="Processing"></el-step>\n <el-step title="Step 3"></el-step>\n</el-steps>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-steps",{attrs:{space:100,active:1,"finish-status":"success"}},[t("el-step",{attrs:{title:"Done"}}),t("el-step",{attrs:{title:"Processing"}}),t("el-step",{attrs:{title:"Step 3"}})],1)],1),t("p",[s._v("Use "),t("code",[s._v("title")]),s._v(" attribute to set the name of the step, or override the attribute by using a named "),t("code",[s._v("slot")]),s._v(". We have listed all the slot names for you at the end of this page.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":space")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("finish-status")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Done"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Processing"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("There is description for each step.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-steps :space="200" :active="1">\n <el-step title="Step 1" description="Some description"></el-step>\n <el-step title="Step 2" description="Some description"></el-step>\n <el-step title="Step 3" description="Some description"></el-step>\n</el-steps>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-steps",{attrs:{space:200,active:1}},[t("el-step",{attrs:{title:"Step 1",description:"Some description"}}),t("el-step",{attrs:{title:"Step 2",description:"Some description"}}),t("el-step",{attrs:{title:"Step 3",description:"Some description"}})],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":space")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 1"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Some description"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 2"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Some description"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Some description"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(">")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("A variety of custom icons can be used in the step bar.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-steps :space="100" :active="1">\n <el-step title="Step 1" icon="edit"></el-step>\n <el-step title="Step 2" icon="upload"></el-step>\n <el-step title="Step 3" icon="picture"></el-step>\n</el-steps>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-steps",{attrs:{space:100,active:1}},[t("el-step",{attrs:{title:"Step 1",icon:"edit"}}),t("el-step",{attrs:{title:"Step 2",icon:"upload"}}),t("el-step",{attrs:{title:"Step 3",icon:"picture"}})],1)],1),t("p",[s._v("The icon is set by the "),t("code",[s._v("icon")]),s._v(" property. The types of icons can be found in the document for the Icon component. In addition, you can customize the icon through a named "),t("code",[s._v("slot")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":space")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 1"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"edit"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 2"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"upload"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"picture"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(">")]),s._v("\n")])])])]),s._m(5),t("p",[s._v("Vertical step bars.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-steps :space="100" direction="vertical" :active="1">\n <el-step title="Step 1"></el-step>\n <el-step title="Step 2"></el-step>\n <el-step title="Step 3"></el-step>\n</el-steps>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-steps",{attrs:{space:100,direction:"vertical",active:1}},[t("el-step",{attrs:{title:"Step 1"}}),t("el-step",{attrs:{title:"Step 2"}}),t("el-step",{attrs:{title:"Step 3"}})],1)],1),t("p",[s._v("You only need to set the "),t("code",[s._v("direction")]),s._v(" attribute to"),t("code",[s._v("vertical")]),s._v(" in the "),t("code",[s._v("el-steps")]),s._v(" element.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":space")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("direction")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"vertical"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 1"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 2"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"steps"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"basic-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"step-bar-that-contains-status"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-that-contains-status","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar that contains status")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"step-bar-with-description"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-description","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar with description")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"step-bar-with-icon"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar with icon")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"vertical-step-bar"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#vertical-step-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Vertical step bar")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"steps-attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#steps-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("space")]),t("td",[s._v("the spacing of each step, will be responsive if omitted. Support percentage.")]),t("td",[s._v("Number,String")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("direction")]),t("td",[s._v("display direction")]),t("td",[s._v("string")]),t("td",[s._v("vertical/horizontal")]),t("td",[s._v("horizontal")])]),t("tr",[t("td",[s._v("active")]),t("td",[s._v("current activation step")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("process-status")]),t("td",[s._v("status of current step")]),t("td",[s._v("string")]),t("td",[s._v("wait/process/finish/error/success")]),t("td",[s._v("process")])]),t("tr",[t("td",[s._v("finish-status")]),t("td",[s._v("status of end step")]),t("td",[s._v("string")]),t("td",[s._v("wait/process/finish/error/success")]),t("td",[s._v("finish")])]),t("tr",[t("td",[s._v("align-center")]),t("td",[s._v("whether step description is centered")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("center")]),t("td",[s._v("center whole "),t("code",{pre:!0},[s._v("Steps")]),s._v(" component")]),t("td",[s._v("boolean")]),t("td",[s._v("-")]),t("td",[s._v("false")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"step-attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#step-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("title")]),t("td",[s._v("step title")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("description")]),t("td",[s._v("step description")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("icon")]),t("td",[s._v("step icon")]),t("td",[s._v("icons provided by YufpWP Icon. Can be overwritten by a named slot if you want to use custom icons")]),t("td",[s._v("string")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("status")]),t("td",[s._v("current status. It will be automatically set by Steps if not configured.")]),t("td",[s._v("wait/process/finish/error/success")]),t("td",[s._v("-")]),t("td")])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"step-slot"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#step-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step Slot")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Name")]),t("th",[s._v("Description")])])]),t("tbody",[t("tr",[t("td",[s._v("icon")]),t("td",[s._v("custom icon")])]),t("tr",[t("td",[s._v("title")]),t("td",[s._v("step title")])]),t("tr",[t("td",[s._v("description")]),t("td",[s._v("step description")])])])])}],!1,null,null,null);t.default=a.exports},867:function(s,t,a){"use strict";a.r(t);var l={data:function(){return{value1:!0,value2:!0,value3:"100",value4:!0}}},a=(a(753),a(0)),a=Object(a.a)(l,function(){var t=this,s=t.$createElement,s=t._self._c||s;return s("section",[t._m(0),s("p",[t._v("Switch is used for switching between two opposing states.")]),t._m(1),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-switch v-model="value1" on-text off-text>\n</el-switch>\n<el-switch v-model="value2" on-color="#13ce66" off-color="#ff4949">\n</el-switch>\n\n\n',script:"\n export default {\n data: function() {\n return {\n value1: true,\n value2: true\n }\n }\n };\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-switch",{attrs:{"on-text":"","off-text":""},model:{value:t.value1,callback:function(s){t.value1=s},expression:"value1"}}),s("el-switch",{attrs:{"on-color":"#13ce66","off-color":"#ff4949"},model:{value:t.value2,callback:function(s){t.value2=s},expression:"value2"}})],1),s("p",[t._v("Bind "),s("code",[t._v("v-model")]),t._v(" to a "),s("code",[t._v("Boolean")]),t._v(" typed variable. You can add "),s("code",[t._v("on-text")]),t._v(" or "),s("code",[t._v("off-text")]),t._v(" attribute to show texts when the component is "),s("code",[t._v("on")]),t._v(" or "),s("code",[t._v("off")]),t._v(", respectively. The "),s("code",[t._v("on-color")]),t._v(" and "),s("code",[t._v("off-color")]),t._v(" attribute decides the background color in two states.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-switch")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value1"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("on-text")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('""')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("off-text")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('""')]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-switch")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-switch")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value2"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("on-color")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"#13ce66"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("off-color")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"#ff4949"')]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-switch")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value1")]),t._v(": "),s("span",{attrs:{class:"hljs-literal"}},[t._v("true")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value2")]),t._v(": "),s("span",{attrs:{class:"hljs-literal"}},[t._v("true")]),t._v("\n }\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(2),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tooltip :content="\'Switch value: \' + value3" placement="top">\n <el-switch v-model="value3" on-color="#13ce66" off-color="#ff4949" on-value="100" off-value="0">\n </el-switch>\n</el-tooltip>\n\n\n',script:"\n export default {\n data: function() {\n return {\n value3: '100'\n }\n }\n };\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-tooltip",{attrs:{content:"Switch value: "+t.value3,placement:"top"}},[s("el-switch",{attrs:{"on-color":"#13ce66","off-color":"#ff4949","on-value":"100","off-value":"0"},model:{value:t.value3,callback:function(s){t.value3=s},expression:"value3"}})],1)],1),s("p",[t._v("You can set "),s("code",[t._v("on-value")]),t._v(" and "),s("code",[t._v("off-value")]),t._v(" attributes. They both receive a "),s("code",[t._v("Boolean")]),t._v(", "),s("code",[t._v("String")]),t._v(" or "),s("code",[t._v("Number")]),t._v(" typed value.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tooltip")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":content")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v("\"'Switch value: ' + value3\"")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placement")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"top"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-switch")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value3"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("on-color")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"#13ce66"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("off-color")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"#ff4949"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("on-value")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"100"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("off-value")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"0"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-switch")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tooltip")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value3")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'100'")]),t._v("\n }\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(3),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-switch v-model="value4" on-text off-text disabled>\n</el-switch>\n<el-switch v-model="value4" disabled>\n</el-switch>\n\n\n',script:"\n export default {\n data: function() {\n return {\n value4: true\n }\n }\n };\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-switch",{attrs:{"on-text":"","off-text":"",disabled:""},model:{value:t.value4,callback:function(s){t.value4=s},expression:"value4"}}),s("el-switch",{attrs:{disabled:""},model:{value:t.value4,callback:function(s){t.value4=s},expression:"value4"}})],1),s("p",[t._v("Adding the "),s("code",[t._v("disabled")]),t._v(" attribute disables Switch.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-switch")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value4"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("on-text")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('""')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("off-text")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('""')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("disabled")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-switch")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-switch")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value4"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("disabled")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-switch")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value4")]),t._v(": "),s("span",{attrs:{class:"hljs-literal"}},[t._v("true")]),t._v("\n }\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(4),t._m(5),t._m(6),t._m(7)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"switch"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#switch","aria-hidden":"true"}},[this._v("¶")]),this._v(" Switch")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"basic-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"extended-value-types"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#extended-value-types","aria-hidden":"true"}},[this._v("¶")]),this._v(" Extended value types")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"disabled"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("whether Switch is disabled")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("width")]),t("td",[s._v("width of Switch")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("58 (with text) / 46 (no text)")])]),t("tr",[t("td",[s._v("on-icon-class")]),t("td",[s._v("class name of the icon displayed when in "),t("code",{pre:!0},[s._v("on")]),s._v(" state, overrides "),t("code",{pre:!0},[s._v("on-text")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("off-icon-class")]),t("td",[s._v("class name of the icon displayed when in "),t("code",{pre:!0},[s._v("off")]),s._v(" state, overrides "),t("code",{pre:!0},[s._v("off-text")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("on-text")]),t("td",[s._v("text displayed when in "),t("code",{pre:!0},[s._v("on")]),s._v(" state")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("ON")])]),t("tr",[t("td",[s._v("off-text")]),t("td",[s._v("text displayed when in "),t("code",{pre:!0},[s._v("off")]),s._v(" state")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("OFF")])]),t("tr",[t("td",[s._v("on-value")]),t("td",[s._v("switch value when in "),t("code",{pre:!0},[s._v("on")]),s._v(" state")]),t("td",[s._v("boolean / string / number")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("off-value")]),t("td",[s._v("switch value when in "),t("code",{pre:!0},[s._v("off")]),s._v(" state")]),t("td",[s._v("boolean / string / number")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("on-color")]),t("td",[s._v("background color when in "),t("code",{pre:!0},[s._v("on")]),s._v(" state")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#20A0FF")])]),t("tr",[t("td",[s._v("off-color")]),t("td",[s._v("background color when in "),t("code",{pre:!0},[s._v("off")]),s._v(" state")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#C0CCDA")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("input name of Switch")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("allow-focus")]),t("td",[s._v("allow "),t("code",{pre:!0},[s._v("focus")]),s._v(" and "),t("code",{pre:!0},[s._v("blur")]),s._v(" events on the input")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"events"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Event Name")]),t("th",[s._v("Description")]),t("th",[s._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("triggers when value changes")]),t("td",[s._v("value after changing")])]),t("tr",[t("td",[s._v("blur")]),t("td",[s._v("triggers on blur (if "),t("code",{pre:!0},[s._v("allow-focus")]),s._v(" is true)")]),t("td",[s._v("event: Event")])]),t("tr",[t("td",[s._v("focus")]),t("td",[s._v("triggers on focus (if "),t("code",{pre:!0},[s._v("allow-focus")]),s._v(" is true)")]),t("td",[s._v("event: Event")])])])])}],!1,null,null,null);t.default=a.exports},868:function(s,t,a){"use strict";a.r(t);var l={data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"}],tableData2:[{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles",$info:!0},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles",$positive:!0}],tableData3:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}],tableData4:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}],tableData6:[{id:"12987122",name:"Tom",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"Tom",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"Tom",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"Tom",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"Tom",amount1:"539",amount2:"4.1",amount3:15}],currentRow:null,multipleSelection:[]}},methods:{getSummaries:function(s){var t=s.columns,l=s.data,n=[];return t.forEach(function(t,s){var a;0===s?n[s]="Total Cost":(a=l.map(function(s){return Number(s[t.property])})).every(function(s){return isNaN(s)})?n[s]="N/A":n[s]="$ "+a.reduce(function(s,t){var a=Number(t);return isNaN(a)?s:s+t},0)}),n},setCurrent:function(s){this.$refs.singleTable.setCurrentRow(s)},toggleSelection:function(s){var t=this;s?s.forEach(function(s){t.$refs.multipleTable.toggleRowSelection(s)}):t.$refs.multipleTable.clearSelection()},handleClick:function(){console.log("click")},handleEdit:function(s,t){console.log(s,t)},handleDelete:function(s,t){console.log(s,t)},handleSelectionChange:function(s){this.multipleSelection=s},handleCurrentChange:function(s){this.currentRow=s},formatter:function(s,t){return s.address},filterTag:function(s,t){return t.tag===s},tableRowClassName:function(s,t){return 1===t?"info-row":3===t?"positive-row":""},deleteRow:function(s,t){t.splice(s,1)},arraySpanMethod:function(s){s.row,s.column;var t=s.rowIndex,s=s.columnIndex;if(t%2==0)return 0===s?[1,2]:1===s?[0,0]:void 0},objectSpanMethod:function(s){s.row,s.column;var t=s.rowIndex;if(0===s.columnIndex)return t%2==0?{rowspan:2,colspan:1}:{rowspan:0,colspan:0}}},watch:{multipleSelection:function(s){console.log("selection: ",s)}}},a=(a(754),a(0)),a=Object(a.a)(l,function(){var a=this,s=a.$createElement,l=a._self._c||s;return l("section",[a._m(0),l("p",[a._v("Display multiple data with similar format. You can sort, filter, compare your data in a table.")]),a._m(1),l("p",[a._v("Basic table is just for data display.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:' <template>\n <el-table :data="tableData" style="width: 100%">\n <el-table-column prop="date" label="Date" width="180">\n </el-table-column>\n <el-table-column prop="name" label="Name" width="180">\n </el-table-column>\n <el-table-column prop="address" label="Address">\n </el-table-column>\n </el-table>\n </template>\n\n \n',script:"\n export default {\n data: function() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n }\n }\n ",style:null}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[l("el-table",{staticStyle:{width:"100%"},attrs:{data:a.tableData}},[l("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),l("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),l("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),l("p",[a._v("After setting attribute "),l("code",[a._v("data")]),a._v(" of "),l("code",[a._v("el-table")]),a._v(" with an object array, you can use "),l("code",[a._v("prop")]),a._v(" (corresponding to a key of the object in "),l("code",[a._v("data")]),a._v(" array) in "),l("code",[a._v("el-table-column")]),a._v(" to insert data to table columns, and set the attribute "),l("code",[a._v("label")]),a._v(" to define the column name. You can also use the attribute "),l("code",[a._v("width")]),a._v(" to define the width of columns.")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[a._v(" "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":data")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"tableData"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("style")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"width: 100%"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"date"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Date"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"180"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"name"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Name"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"180"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"address"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Address"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),l("span",{attrs:{class:"javascript"}},[a._v("\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("export")]),a._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("default")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("data")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("tableData")]),a._v(": [{\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-03'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-02'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-04'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-01'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }]\n }\n }\n }\n ")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),a._v("\n")])])])]),a._m(2),l("p",[a._v("Striped table makes it easier to distinguish different rows.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData" stripe style="width: 100%">\n <el-table-column prop="date" label="Date" width="180">\n </el-table-column>\n <el-table-column prop="name" label="Name" width="180">\n </el-table-column>\n <el-table-column prop="address" label="Address">\n </el-table-column>\n </el-table>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n }\n }\n",style:null}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[l("el-table",{staticStyle:{width:"100%"},attrs:{data:a.tableData,stripe:""}},[l("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),l("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),l("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),l("p",[a._v("Attribute "),l("code",[a._v("stripe")]),a._v(" accepts a "),l("code",[a._v("Boolean")]),a._v(". If "),l("code",[a._v("true")]),a._v(", table will be striped.")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":data")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"tableData"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("stripe")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("style")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"width: 100%"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"date"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Date"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"180"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"name"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Name"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"180"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"address"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Address"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),l("span",{attrs:{class:"javascript"}},[a._v("\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("export")]),a._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("default")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("data")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("tableData")]),a._v(": [{\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-03'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-02'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-04'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-01'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }]\n }\n }\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),a._v("\n")])])])]),a._m(3),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData" border style="width: 100%">\n <el-table-column prop="date" label="Date" width="180">\n </el-table-column>\n <el-table-column prop="name" label="Name" width="180">\n </el-table-column>\n <el-table-column prop="address" label="Address">\n </el-table-column>\n </el-table>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n }\n }\n",style:null}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[l("el-table",{staticStyle:{width:"100%"},attrs:{data:a.tableData,border:""}},[l("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),l("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),l("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),l("p",[a._v("By default, Table has no vertical border. If you need it, you can set attribute "),l("code",[a._v("border")]),a._v(" to "),l("code",[a._v("true")]),a._v(".")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":data")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"tableData"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("border")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("style")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"width: 100%"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"date"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Date"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"180"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"name"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Name"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"180"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"address"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Address"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),l("span",{attrs:{class:"javascript"}},[a._v("\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("export")]),a._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("default")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("data")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("tableData")]),a._v(": [{\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-03'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-02'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-04'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-01'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }]\n }\n }\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),a._v("\n")])])])]),a._m(4),l("p",[a._v('You can highlight your table content to distinguish between "success, information, warning, danger" and other states.')]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData2" style="width: 100%" :row-class-name="tableRowClassName">\n <el-table-column prop="date" label="Date" width="180">\n </el-table-column>\n <el-table-column prop="name" label="Name" width="180">\n </el-table-column>\n <el-table-column prop="address" label="Address">\n </el-table-column>\n </el-table>\n</template>\n\n\n\n\n',script:"\n export default {\n methods: {\n tableRowClassName: function(row, index) {\n if (index === 1) {\n return 'info-row';\n } else if (index === 3) {\n return 'positive-row';\n }\n return '';\n }\n },\n data: function() {\n return {\n tableData2: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n }\n }\n",style:"\n .el-table .info-row {\n background: #c9e5f5;\n }\n\n .el-table .positive-row {\n background: #e2f0e4;\n }\n"}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[l("el-table",{staticStyle:{width:"100%"},attrs:{data:a.tableData2,"row-class-name":a.tableRowClassName}},[l("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),l("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),l("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),l("p",[a._v("Use "),l("code",[a._v("row-class-name")]),a._v(" in "),l("code",[a._v("el-table")]),a._v(" to add custom classes to a certain row. Then you can style it with custom classes.")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":data")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"tableData2"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("style")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"width: 100%"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":row-class-name")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"tableRowClassName"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"date"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Date"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"180"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"name"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Name"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"180"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"address"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Address"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("style")]),a._v(">")]),l("span",{attrs:{class:"css"}},[a._v("\n "),l("span",{attrs:{class:"hljs-selector-class"}},[a._v(".el-table")]),a._v(" "),l("span",{attrs:{class:"hljs-selector-class"}},[a._v(".info-row")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[a._v("background")]),a._v(": "),l("span",{attrs:{class:"hljs-number"}},[a._v("#c9e5f5")]),a._v(";\n }\n\n "),l("span",{attrs:{class:"hljs-selector-class"}},[a._v(".el-table")]),a._v(" "),l("span",{attrs:{class:"hljs-selector-class"}},[a._v(".positive-row")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attribute"}},[a._v("background")]),a._v(": "),l("span",{attrs:{class:"hljs-number"}},[a._v("#e2f0e4")]),a._v(";\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("style")]),a._v(">")]),a._v("\n\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),l("span",{attrs:{class:"javascript"}},[a._v("\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("export")]),a._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("default")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("methods")]),a._v(": {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("tableRowClassName")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("row, index")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("if")]),a._v(" (index === "),l("span",{attrs:{class:"hljs-number"}},[a._v("1")]),a._v(") {\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" "),l("span",{attrs:{class:"hljs-string"}},[a._v("'info-row'")]),a._v(";\n } "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("else")]),a._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("if")]),a._v(" (index === "),l("span",{attrs:{class:"hljs-number"}},[a._v("3")]),a._v(") {\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" "),l("span",{attrs:{class:"hljs-string"}},[a._v("'positive-row'")]),a._v(";\n }\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" "),l("span",{attrs:{class:"hljs-string"}},[a._v("''")]),a._v(";\n }\n },\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("data")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("tableData2")]),a._v(": [{\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-03'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-02'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-04'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-01'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }]\n }\n }\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),a._v("\n")])])])]),a._m(5),l("p",[a._v("When there are too many rows, you can use a fixed header.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData3" height="250" border style="width: 100%">\n <el-table-column prop="date" label="Date" width="180">\n </el-table-column>\n <el-table-column prop="name" label="Name" width="180">\n </el-table-column>\n <el-table-column prop="address" label="Address">\n </el-table-column>\n </el-table>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n return {\n tableData3: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }],\n }\n }\n }\n",style:null}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[l("el-table",{staticStyle:{width:"100%"},attrs:{data:a.tableData3,height:"250",border:""}},[l("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),l("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),l("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),l("p",[a._v("By setting the attribute "),l("code",[a._v("height")]),a._v(" of "),l("code",[a._v("el-table")]),a._v(", you can fix the table header without any other codes.")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":data")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"tableData3"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("height")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"250"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("border")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("style")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"width: 100%"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"date"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Date"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"180"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"name"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Name"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"180"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"address"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Address"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),l("span",{attrs:{class:"javascript"}},[a._v("\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("export")]),a._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("default")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("data")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("tableData3")]),a._v(": [{\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-03'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-02'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-04'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-01'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-08'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-06'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-07'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }],\n }\n }\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),a._v("\n")])])])]),a._m(6),l("p",[a._v("When there are too many columns, you can fix some of them.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData" border style="width: 100%">\n <el-table-column fixed prop="date" label="Date" width="150">\n </el-table-column>\n <el-table-column prop="name" label="Name" width="120">\n </el-table-column>\n <el-table-column prop="state" label="State" width="120">\n </el-table-column>\n <el-table-column prop="city" label="City" width="120">\n </el-table-column>\n <el-table-column prop="address" label="Address" width="300">\n </el-table-column>\n <el-table-column prop="zip" label="Zip" width="120">\n </el-table-column>\n <el-table-column fixed="right" label="Operations" width="120">\n <template slot-scope="scope">\n <el-button @click="handleClick" type="text" size="small">Detail</el-button>\n <el-button type="text" size="small">Edit</el-button>\n </template>\n </el-table-column>\n </el-table>\n</template>\n\n\n',script:"\n export default {\n methods: {\n handleClick: function() {\n console.log('click');\n }\n },\n data: function() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Home'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Office'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Home'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Office'\n }]\n }\n }\n }\n",style:null}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[l("el-table",{staticStyle:{width:"100%"},attrs:{data:a.tableData,border:""}},[l("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),l("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),l("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),l("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),l("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),l("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}}),l("el-table-column",{attrs:{fixed:"right",label:"Operations",width:"120"},scopedSlots:a._u([{key:"default",fn:function(s){return[l("el-button",{attrs:{type:"text",size:"small"},on:{click:a.handleClick}},[a._v("Detail")]),l("el-button",{attrs:{type:"text",size:"small"}},[a._v("Edit")])]}}])})],1)]],2),l("p",[a._v("Attribute "),l("code",[a._v("fixed")]),a._v(" is used in "),l("code",[a._v("el-table-column")]),a._v(", it accepts a "),l("code",[a._v("Boolean")]),a._v(". If "),l("code",[a._v("true")]),a._v(", the column will be fixed at left. It also accepts two string literals: 'left' and 'right', both indicating that the column will be fixed at corresponding direction.")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":data")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"tableData"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("border")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("style")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"width: 100%"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("fixed")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"date"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Date"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"150"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"name"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Name"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"120"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"state"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"State"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"120"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"city"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"City"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"120"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"address"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Address"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"300"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"zip"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Zip"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"120"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("fixed")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"right"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Operations"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"120"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("slot-scope")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"scope"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("@click")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"handleClick"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"text"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("size")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"small"')]),a._v(">")]),a._v("Detail"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"text"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("size")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"small"')]),a._v(">")]),a._v("Edit"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),l("span",{attrs:{class:"javascript"}},[a._v("\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("export")]),a._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("default")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("methods")]),a._v(": {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("handleClick")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-built_in"}},[a._v("console")]),a._v(".log("),l("span",{attrs:{class:"hljs-string"}},[a._v("'click'")]),a._v(");\n }\n },\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("data")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("tableData")]),a._v(": [{\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-03'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("state")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'California'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("city")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("zip")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'CA 90036'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("tag")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Home'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-02'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("state")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'California'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("city")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("zip")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'CA 90036'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("tag")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Office'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-04'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("state")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'California'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("city")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("zip")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'CA 90036'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("tag")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Home'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-01'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("state")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'California'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("city")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("zip")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'CA 90036'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("tag")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Office'")]),a._v("\n }]\n }\n }\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),a._v("\n")])])])]),a._m(7),l("p",[a._v("When you have huge chunks of data to put in a table, you can fix the header and columns at the same time.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData3" border style="width: 100%" height="250">\n <el-table-column fixed prop="date" label="Date" width="150">\n </el-table-column>\n <el-table-column prop="name" label="Name" width="120">\n </el-table-column>\n <el-table-column prop="state" label="State" width="120">\n </el-table-column>\n <el-table-column prop="city" label="City" width="120">\n </el-table-column>\n <el-table-column prop="address" label="Address" width="300">\n </el-table-column>\n <el-table-column prop="zip" label="Zip" width="120">\n </el-table-column>\n </el-table>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n return {\n tableData3: [{\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }]\n }\n }\n }\n",style:null}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[l("el-table",{staticStyle:{width:"100%"},attrs:{data:a.tableData3,border:"",height:"250"}},[l("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),l("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),l("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),l("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),l("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),l("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}})],1)]],2),l("p",[a._v("Fix columns and header at the same time by combining the above two examples.")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":data")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"tableData3"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("border")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("style")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"width: 100%"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("height")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"250"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("fixed")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"date"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Date"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"150"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"name"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Name"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"120"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"state"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"State"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"120"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"city"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"City"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"120"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"address"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Address"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"300"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"zip"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Zip"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"120"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),l("span",{attrs:{class:"javascript"}},[a._v("\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("export")]),a._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("default")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("data")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("tableData3")]),a._v(": [{\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-03'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("state")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'California'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("city")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("zip")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'CA 90036'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-02'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("state")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'California'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("city")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("zip")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'CA 90036'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-04'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("state")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'California'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("city")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("zip")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'CA 90036'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-01'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("state")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'California'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("city")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("zip")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'CA 90036'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-08'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("state")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'California'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("city")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("zip")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'CA 90036'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-06'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("state")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'California'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("city")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("zip")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'CA 90036'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-07'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("state")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'California'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("city")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("zip")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'CA 90036'")]),a._v("\n }]\n }\n }\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),a._v("\n")])])])]),a._m(8),l("p",[a._v("When the the data is dynamically changed, you might want the table to have a maximum height rather than a fixed height and to show the scroll bar if needed.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData4" border style="width: 100%" max-height="250">\n <el-table-column fixed prop="date" label="Date" width="150">\n </el-table-column>\n <el-table-column prop="name" label="Name" width="120">\n </el-table-column>\n <el-table-column prop="state" label="State" width="120">\n </el-table-column>\n <el-table-column prop="city" label="City" width="120">\n </el-table-column>\n <el-table-column prop="address" label="Address" width="300">\n </el-table-column>\n <el-table-column prop="zip" label="Zip" width="120">\n </el-table-column>\n <el-table-column fixed="right" label="Operations" width="120">\n <template slot-scope="scope">\n <el-button @click.native.prevent="deleteRow(scope.$index, tableData4)" type="text" size="small">\n Remove\n </el-button>\n </template>\n </el-table-column>\n </el-table>\n</template>\n\n\n',script:"\n export default {\n methods: {\n deleteRow: function(index, rows) {\n rows.splice(index, 1);\n }\n },\n data: function() {\n return {\n tableData4: [{\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }]\n }\n }\n }\n",style:null}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[l("el-table",{staticStyle:{width:"100%"},attrs:{data:a.tableData4,border:"","max-height":"250"}},[l("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),l("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),l("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),l("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),l("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),l("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}}),l("el-table-column",{attrs:{fixed:"right",label:"Operations",width:"120"},scopedSlots:a._u([{key:"default",fn:function(t){return[l("el-button",{attrs:{type:"text",size:"small"},nativeOn:{click:function(s){s.preventDefault(),a.deleteRow(t.$index,a.tableData4)}}},[a._v("\n Remove\n ")])]}}])})],1)]],2),l("p",[a._v("By setting the attribute "),l("code",[a._v("max-height")]),a._v(" of "),l("code",[a._v("el-table")]),a._v(", you can fix the table header. The table body scrolls only if the height of the rows exceeds the max height value.")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":data")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"tableData4"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("border")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("style")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"width: 100%"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("max-height")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"250"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("fixed")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"date"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Date"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"150"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"name"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Name"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"120"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"state"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"State"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"120"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"city"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"City"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"120"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"address"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Address"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"300"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"zip"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Zip"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"120"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("fixed")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"right"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Operations"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"120"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("slot-scope")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"scope"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("@click.native.prevent")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"deleteRow(scope.$index, tableData4)"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"text"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("size")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"small"')]),a._v(">")]),a._v("\n Remove\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),l("span",{attrs:{class:"javascript"}},[a._v("\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("export")]),a._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("default")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("methods")]),a._v(": {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("deleteRow")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("index, rows")]),a._v(") ")]),a._v("{\n rows.splice(index, "),l("span",{attrs:{class:"hljs-number"}},[a._v("1")]),a._v(");\n }\n },\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("data")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("tableData4")]),a._v(": [{\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-03'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("state")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'California'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("city")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("zip")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'CA 90036'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-02'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("state")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'California'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("city")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("zip")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'CA 90036'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-04'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("state")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'California'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("city")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("zip")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'CA 90036'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-01'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("state")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'California'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("city")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("zip")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'CA 90036'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-08'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("state")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'California'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("city")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("zip")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'CA 90036'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-06'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("state")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'California'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("city")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("zip")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'CA 90036'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-07'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("state")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'California'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("city")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("zip")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'CA 90036'")]),a._v("\n }]\n }\n }\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),a._v("\n")])])])]),a._m(9),l("p",[a._v("When the data structure is complex, you can use group header to show the data hierarchy.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData3" border style="width: 100%">\n <el-table-column prop="date" label="Date" width="150">\n </el-table-column>\n <el-table-column label="Delivery Info">\n <el-table-column prop="name" label="Name" width="120">\n </el-table-column>\n <el-table-column label="Address Info">\n <el-table-column prop="state" label="State" width="120">\n </el-table-column>\n <el-table-column prop="city" label="City" width="120">\n </el-table-column>\n <el-table-column prop="address" label="Address" width="300">\n </el-table-column>\n <el-table-column prop="zip" label="Zip" width="120">\n </el-table-column>\n </el-table-column>\n </el-table-column>\n </el-table>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n return {\n tableData3: [{\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }]\n }\n }\n }\n",style:null}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[l("el-table",{staticStyle:{width:"100%"},attrs:{data:a.tableData3,border:""}},[l("el-table-column",{attrs:{prop:"date",label:"Date",width:"150"}}),l("el-table-column",{attrs:{label:"Delivery Info"}},[l("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),l("el-table-column",{attrs:{label:"Address Info"}},[l("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),l("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),l("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),l("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}})],1)],1)],1)]],2),l("p",[a._v("Only need to place el-table-column inside a el-table-column, you can achieve group header.")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":data")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"tableData3"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("border")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("style")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"width: 100%"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"date"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Date"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"150"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Delivery Info"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"name"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Name"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"120"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Address Info"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"state"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"State"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"120"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"city"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"City"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"120"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"address"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Address"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"300"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"zip"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Zip"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"120"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),l("span",{attrs:{class:"javascript"}},[a._v("\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("export")]),a._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("default")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("data")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("tableData3")]),a._v(": [{\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-03'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("state")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'California'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("city")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("zip")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'CA 90036'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-02'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("state")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'California'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("city")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("zip")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'CA 90036'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-04'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("state")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'California'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("city")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("zip")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'CA 90036'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-01'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("state")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'California'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("city")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("zip")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'CA 90036'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-08'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("state")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'California'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("city")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("zip")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'CA 90036'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-06'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("state")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'California'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("city")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("zip")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'CA 90036'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-07'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("state")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'California'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("city")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("zip")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'CA 90036'")]),a._v("\n }]\n }\n }\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),a._v("\n")])])])]),a._m(10),l("p",[a._v("Single row selection is supported.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table ref="singleTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange" style="width: 100%">\n <el-table-column type="index" width="50">\n </el-table-column>\n <el-table-column property="date" label="Date" width="120">\n </el-table-column>\n <el-table-column property="name" label="Name" width="120">\n </el-table-column>\n <el-table-column property="address" label="Address">\n </el-table-column>\n </el-table>\n <div style="margin-top: 20px">\n <el-button @click="setCurrent(tableData[1])">Select second row</el-button>\n <el-button @click="setCurrent()">Clear selection</el-button>\n </div>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }],\n currentRow: null\n }\n },\n\n methods: {\n setCurrent: function(row) {\n this.$refs.singleTable.setCurrentRow(row);\n },\n handleCurrentChange: function(val) {\n this.currentRow = val;\n }\n }\n }\n",style:null}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[l("el-table",{ref:"singleTable",staticStyle:{width:"100%"},attrs:{data:a.tableData,"highlight-current-row":""},on:{"current-change":a.handleCurrentChange}},[l("el-table-column",{attrs:{type:"index",width:"50"}}),l("el-table-column",{attrs:{property:"date",label:"Date",width:"120"}}),l("el-table-column",{attrs:{property:"name",label:"Name",width:"120"}}),l("el-table-column",{attrs:{property:"address",label:"Address"}})],1),l("div",{staticStyle:{"margin-top":"20px"}},[l("el-button",{on:{click:function(s){a.setCurrent(a.tableData[1])}}},[a._v("Select second row")]),l("el-button",{on:{click:function(s){a.setCurrent()}}},[a._v("Clear selection")])],1)]],2),l("p",[a._v("Table supports single row selection. You can activate it by adding the "),l("code",[a._v("highlight-current-row")]),a._v(" attribute. An event called "),l("code",[a._v("current-change")]),a._v(" will be triggered when row selection changes, and its parameters are the rows after and before this change: "),l("code",[a._v("currentRow")]),a._v(" and "),l("code",[a._v("oldCurrentRow")]),a._v(". If you need to display row index, you can add a new "),l("code",[a._v("el-table-column")]),a._v(" with its "),l("code",[a._v("type")]),a._v(" attribute assigned to "),l("code",[a._v("index")]),a._v(", and you will see the index starting from 1.")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("ref")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"singleTable"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":data")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"tableData"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("highlight-current-row")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("@current-change")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"handleCurrentChange"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("style")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"width: 100%"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"index"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"50"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("property")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"date"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Date"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"120"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("property")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"name"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Name"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"120"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("property")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"address"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Address"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("div")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("style")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"margin-top: 20px"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("@click")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"setCurrent(tableData[1])"')]),a._v(">")]),a._v("Select second row"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("@click")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"setCurrent()"')]),a._v(">")]),a._v("Clear selection"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("div")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),l("span",{attrs:{class:"javascript"}},[a._v("\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("export")]),a._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("default")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("data")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("tableData")]),a._v(": [{\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-03'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-02'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-04'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-01'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }],\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("currentRow")]),a._v(": "),l("span",{attrs:{class:"hljs-literal"}},[a._v("null")]),a._v("\n }\n },\n\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("methods")]),a._v(": {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("setCurrent")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("row")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".$refs.singleTable.setCurrentRow(row);\n },\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("handleCurrentChange")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("val")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".currentRow = val;\n }\n }\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),a._v("\n")])])])]),a._m(11),l("p",[a._v("You can also select multiple rows.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table ref="multipleTable" :data="tableData3" border style="width: 100%" @selection-change="handleSelectionChange">\n <el-table-column type="selection" width="55">\n </el-table-column>\n <el-table-column label="Date" width="120">\n <template slot-scope="scope">{{ scope.row.date }}</template>\n </el-table-column>\n <el-table-column property="name" label="Name" width="120">\n </el-table-column>\n <el-table-column property="address" label="Address" show-overflow-tooltip>\n </el-table-column>\n </el-table>\n <div style="margin-top: 20px">\n <el-button @click="toggleSelection([tableData3[1], tableData3[2]])">Toggle selection status of second and third rows</el-button>\n <el-button @click="toggleSelection()">Clear selection</el-button>\n </div>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n return {\n tableData3: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }],\n multipleSelection: []\n }\n },\n\n methods: {\n toggleSelection: function(rows) {\n var _this = this;\n if (rows) {\n rows.forEach(function(row) {\n _this.$refs.multipleTable.toggleRowSelection(row);\n });\n } else {\n _this.$refs.multipleTable.clearSelection();\n }\n },\n handleSelectionChange: function(val) {\n this.multipleSelection = val;\n }\n }\n }\n",style:null}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[l("el-table",{ref:"multipleTable",staticStyle:{width:"100%"},attrs:{data:a.tableData3,border:""},on:{"selection-change":a.handleSelectionChange}},[l("el-table-column",{attrs:{type:"selection",width:"55"}}),l("el-table-column",{attrs:{label:"Date",width:"120"},scopedSlots:a._u([{key:"default",fn:function(s){return[a._v(a._s(s.row.date))]}}])}),l("el-table-column",{attrs:{property:"name",label:"Name",width:"120"}}),l("el-table-column",{attrs:{property:"address",label:"Address","show-overflow-tooltip":""}})],1),l("div",{staticStyle:{"margin-top":"20px"}},[l("el-button",{on:{click:function(s){a.toggleSelection([a.tableData3[1],a.tableData3[2]])}}},[a._v("Toggle selection status of second and third rows")]),l("el-button",{on:{click:function(s){a.toggleSelection()}}},[a._v("Clear selection")])],1)]],2),l("p",[a._v("Activating multiple selection is easy: simply add an "),l("code",[a._v("el-table-column")]),a._v(" with its "),l("code",[a._v("type")]),a._v(" set to "),l("code",[a._v("selection")]),a._v(". Apart from multiple selection, this example also uses "),l("code",[a._v("show-overflow-tooltip")]),a._v(": by default, if the content is too long, it will break into multiple lines. If you want to keep it in one line, use attribute "),l("code",[a._v("show-overflow-tooltip")]),a._v(", which accepts a "),l("code",[a._v("Boolean")]),a._v(" value. When set "),l("code",[a._v("true")]),a._v(", the extra content will show in tooltip when hover on the cell.")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("ref")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"multipleTable"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":data")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"tableData3"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("border")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("style")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"width: 100%"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("@selection-change")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"handleSelectionChange"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"selection"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"55"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Date"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"120"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("slot-scope")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"scope"')]),a._v(">")]),a._v("{{ scope.row.date }}"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("property")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"name"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Name"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"120"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("property")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"address"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Address"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("show-overflow-tooltip")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("div")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("style")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"margin-top: 20px"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("@click")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"toggleSelection([tableData3[1], tableData3[2]])"')]),a._v(">")]),a._v("Toggle selection status of second and third rows"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("@click")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"toggleSelection()"')]),a._v(">")]),a._v("Clear selection"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("div")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),l("span",{attrs:{class:"javascript"}},[a._v("\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("export")]),a._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("default")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("data")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("tableData3")]),a._v(": [{\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-03'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-02'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-04'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-01'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-08'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-06'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-07'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }],\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("multipleSelection")]),a._v(": []\n }\n },\n\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("methods")]),a._v(": {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("toggleSelection")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("rows")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("var")]),a._v(" _this = "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(";\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("if")]),a._v(" (rows) {\n rows.forEach("),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("row")]),a._v(") ")]),a._v("{\n _this.$refs.multipleTable.toggleRowSelection(row);\n });\n } "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("else")]),a._v(" {\n _this.$refs.multipleTable.clearSelection();\n }\n },\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("handleSelectionChange")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("val")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".multipleSelection = val;\n }\n }\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),a._v("\n")])])])]),a._m(12),l("p",[a._v("Sort the data to find or compare data quickly.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData" border :default-sort="{prop: \'date\', order: \'descending\'}" style="width: 100%">\n <el-table-column prop="date" label="Date" sortable width="180">\n </el-table-column>\n <el-table-column prop="name" label="Name" width="180">\n </el-table-column>\n <el-table-column prop="address" label="Address" :formatter="formatter">\n </el-table-column>\n </el-table>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n },\n methods: {\n formatter: function(row, column) {\n return row.address;\n }\n }\n }\n",style:null}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[l("el-table",{staticStyle:{width:"100%"},attrs:{data:a.tableData,border:"","default-sort":{prop:"date",order:"descending"}}},[l("el-table-column",{attrs:{prop:"date",label:"Date",sortable:"",width:"180"}}),l("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),l("el-table-column",{attrs:{prop:"address",label:"Address",formatter:a.formatter}})],1)]],2),l("p",[a._v("Set attribute "),l("code",[a._v("sortable")]),a._v(" in a certain column to sort the data based on this column. It accepts "),l("code",[a._v("Boolean")]),a._v(" with a default value "),l("code",[a._v("false")]),a._v(". Set table attribute "),l("code",[a._v("default-sort")]),a._v(" to determine default sort column and order. To apply your own sorting rules, use "),l("code",[a._v("sort-method")]),a._v(". If you need remote sorting from backend, set "),l("code",[a._v("sortable")]),a._v(" to "),l("code",[a._v("custom")]),a._v(", and listen to the "),l("code",[a._v("sort-change")]),a._v(" event on Table. In the event handler, you have access to the sorting column and sorting order so that you can fetch sorted table data from API. In this example we use another attribute named "),l("code",[a._v("formatter")]),a._v(" to format the value of certain columns. It accepts a function which has two parameters: "),l("code",[a._v("row")]),a._v(" and "),l("code",[a._v("column")]),a._v(". You can handle it according to your own needs.")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":data")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"tableData"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("border")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":default-sort")]),a._v(" = "),l("span",{attrs:{class:"hljs-string"}},[a._v("\"{prop: 'date', order: 'descending'}\"")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("style")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"width: 100%"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"date"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Date"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("sortable")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"180"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"name"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Name"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"180"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"address"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Address"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":formatter")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"formatter"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),l("span",{attrs:{class:"javascript"}},[a._v("\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("export")]),a._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("default")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("data")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("tableData")]),a._v(": [{\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-03'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-02'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-04'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-01'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }]\n }\n },\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("methods")]),a._v(": {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("formatter")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("row, column")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" row.address;\n }\n }\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),a._v("\n")])])])]),a._m(13),l("p",[a._v("Filter the table to find desired data.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData" border style="width: 100%">\n <el-table-column prop="date" label="Date" sortable width="180">\n </el-table-column>\n <el-table-column prop="name" label="Name" width="180">\n </el-table-column>\n <el-table-column prop="address" label="Address" :formatter="formatter">\n </el-table-column>\n <el-table-column prop="tag" label="Tag" width="100" :filters="[{ text: \'Home\', value: \'Home\' }, { text: \'Office\', value: \'Office\' }]" :filter-method="filterTag" filter-placement="bottom-end">\n <template slot-scope="scope">\n <el-tag :type="scope.row.tag === \'Home\' ? \'primary\' : \'success\'" close-transition>{{scope.row.tag}}</el-tag>\n </template>\n </el-table-column>\n </el-table>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n tag: 'Home'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n tag: 'Office'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n tag: 'Home'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n tag: 'Office'\n }]\n }\n },\n methods: {\n formatter: function(row, column) {\n return row.address;\n },\n filterTag: function(value, row) {\n return row.tag === value;\n }\n }\n }\n",style:null}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[l("el-table",{staticStyle:{width:"100%"},attrs:{data:a.tableData,border:""}},[l("el-table-column",{attrs:{prop:"date",label:"Date",sortable:"",width:"180"}}),l("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),l("el-table-column",{attrs:{prop:"address",label:"Address",formatter:a.formatter}}),l("el-table-column",{attrs:{prop:"tag",label:"Tag",width:"100",filters:[{text:"Home",value:"Home"},{text:"Office",value:"Office"}],"filter-method":a.filterTag,"filter-placement":"bottom-end"},scopedSlots:a._u([{key:"default",fn:function(s){return[l("el-tag",{attrs:{type:"Home"===s.row.tag?"primary":"success","close-transition":""}},[a._v(a._s(s.row.tag))])]}}])})],1)]],2),l("p",[a._v("Set attribute "),l("code",[a._v("filters")]),a._v(" and "),l("code",[a._v("filter-method")]),a._v(" in "),l("code",[a._v("el-table-column")]),a._v(" makes this column filterable. "),l("code",[a._v("filters")]),a._v(" is an array, and "),l("code",[a._v("filter-method")]),a._v(" is a function deciding which rows are displayed. It has two parameters: "),l("code",[a._v("value")]),a._v(" and "),l("code",[a._v("row")]),a._v(".")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":data")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"tableData"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("border")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("style")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"width: 100%"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"date"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Date"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("sortable")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"180"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"name"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Name"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"180"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"address"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Address"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":formatter")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"formatter"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"tag"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Tag"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"100"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":filters")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v("\"[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]\"")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":filter-method")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"filterTag"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("filter-placement")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"bottom-end"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("slot-scope")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"scope"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tag")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v("\"scope.row.tag === 'Home' ? 'primary' : 'success'\"")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("close-transition")]),a._v(">")]),a._v("{{scope.row.tag}}"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tag")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),l("span",{attrs:{class:"javascript"}},[a._v("\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("export")]),a._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("default")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("data")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("tableData")]),a._v(": [{\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-03'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("tag")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Home'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-02'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("tag")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Office'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-04'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("tag")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Home'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-01'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("tag")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Office'")]),a._v("\n }]\n }\n },\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("methods")]),a._v(": {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("formatter")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("row, column")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" row.address;\n },\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("filterTag")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("value, row")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" row.tag === value;\n }\n }\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),a._v("\n")])])])]),a._m(14),l("p",[a._v("Customize table column so it can be integrated with other components.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData" border style="width: 100%">\n <el-table-column label="Date" width="180">\n <template slot-scope="scope">\n <el-icon name="time"></el-icon>\n <span style="margin-left: 10px">{{ scope.row.date }}</span>\n </template>\n </el-table-column>\n <el-table-column label="Name" width="180">\n <template slot-scope="scope">\n <el-popover trigger="hover" placement="top">\n <p>Name: {{ scope.row.name }}</p>\n <p>Addr: {{ scope.row.address }}</p>\n <div slot="reference" class="name-wrapper">\n <el-tag>{{ scope.row.name }}</el-tag>\n </div>\n </el-popover>\n </template>\n </el-table-column>\n <el-table-column label="Operations">\n <template slot-scope="scope">\n <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>\n <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>\n </template>\n </el-table-column>\n </el-table>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n },\n methods: {\n handleEdit: function(index, row) {\n console.log(index, row);\n },\n handleDelete: function(index, row) {\n console.log(index, row);\n }\n }\n }\n",style:null}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[l("el-table",{staticStyle:{width:"100%"},attrs:{data:a.tableData,border:""}},[l("el-table-column",{attrs:{label:"Date",width:"180"},scopedSlots:a._u([{key:"default",fn:function(s){return[l("el-icon",{attrs:{name:"time"}}),l("span",{staticStyle:{"margin-left":"10px"}},[a._v(a._s(s.row.date))])]}}])}),l("el-table-column",{attrs:{label:"Name",width:"180"},scopedSlots:a._u([{key:"default",fn:function(s){return[l("el-popover",{attrs:{trigger:"hover",placement:"top"}},[l("p",[a._v("Name: "+a._s(s.row.name))]),l("p",[a._v("Addr: "+a._s(s.row.address))]),l("div",{staticClass:"name-wrapper",attrs:{slot:"reference"},slot:"reference"},[l("el-tag",[a._v(a._s(s.row.name))])],1)])]}}])}),l("el-table-column",{attrs:{label:"Operations"},scopedSlots:a._u([{key:"default",fn:function(t){return[l("el-button",{attrs:{size:"small"},on:{click:function(s){a.handleEdit(t.$index,t.row)}}},[a._v("Edit")]),l("el-button",{attrs:{size:"small",type:"danger"},on:{click:function(s){a.handleDelete(t.$index,t.row)}}},[a._v("Delete")])]}}])})],1)]],2),l("p",[a._v("You have access to the following data: row, column, $index and store (state management of Table) by "),l("a",{attrs:{href:"https://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[a._v("Scoped slot")]),a._v(". (Scoped slots is supported from "),l("code",[a._v("1.1")]),a._v(", "),l("code",[a._v("inline-template")]),a._v(" still works, but it's not recommended).")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":data")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"tableData"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("border")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("style")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"width: 100%"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Date"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"180"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("slot-scope")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"scope"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-icon")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"time"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-icon")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("span")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("style")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"margin-left: 10px"')]),a._v(">")]),a._v("{{ scope.row.date }}"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("span")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Name"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"180"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("slot-scope")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"scope"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-popover")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("trigger")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"hover"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("placement")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"top"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("p")]),a._v(">")]),a._v("Name: {{ scope.row.name }}"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("p")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("p")]),a._v(">")]),a._v("Addr: {{ scope.row.address }}"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("p")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("div")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("slot")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"reference"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("class")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"name-wrapper"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tag")]),a._v(">")]),a._v("{{ scope.row.name }}"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tag")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("div")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-popover")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Operations"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("slot-scope")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"scope"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("size")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"small"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("@click")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"handleEdit(scope.$index, scope.row)"')]),a._v(">")]),a._v("Edit"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("size")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"small"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"danger"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("@click")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"handleDelete(scope.$index, scope.row)"')]),a._v(">")]),a._v("Delete"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),l("span",{attrs:{class:"javascript"}},[a._v("\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("export")]),a._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("default")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("data")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("tableData")]),a._v(": [{\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-03'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-02'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-04'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-01'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v("\n }]\n }\n },\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("methods")]),a._v(": {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("handleEdit")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("index, row")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-built_in"}},[a._v("console")]),a._v(".log(index, row);\n },\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("handleDelete")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("index, row")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-built_in"}},[a._v("console")]),a._v(".log(index, row);\n }\n }\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),a._v("\n")])])])]),a._m(15),l("p",[a._v("When the row content is too long and you do not want to display the horizontal scroll bar, you can use the expandable row feature.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData3" style="width: 100%">\n <el-table-column type="expand">\n <template slot-scope="props">\n <p>State: {{ props.row.state }}</p>\n <p>City: {{ props.row.city }}</p>\n <p>Address: {{ props.row.address }}</p>\n <p>Zip: {{ props.row.zip }}</p>\n </template>\n </el-table-column>\n <el-table-column label="Date" prop="date">\n </el-table-column>\n <el-table-column label="Name" prop="name">\n </el-table-column>\n </el-table>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n return {\n tableData3: [{\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }]\n }\n }\n }\n",style:null}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[l("el-table",{staticStyle:{width:"100%"},attrs:{data:a.tableData3}},[l("el-table-column",{attrs:{type:"expand"},scopedSlots:a._u([{key:"default",fn:function(s){return[l("p",[a._v("State: "+a._s(s.row.state))]),l("p",[a._v("City: "+a._s(s.row.city))]),l("p",[a._v("Address: "+a._s(s.row.address))]),l("p",[a._v("Zip: "+a._s(s.row.zip))])]}}])}),l("el-table-column",{attrs:{label:"Date",prop:"date"}}),l("el-table-column",{attrs:{label:"Name",prop:"name"}})],1)]],2),l("p",[a._v('Activate expandable row by adding type="expand" and scoped slot. The template for el-table-column will be rendered as the contents of the expanded row, and you can access the same attributes as when you are using '),l("code",[a._v("Scoped slot")]),a._v(" in custom column templates.")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":data")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"tableData3"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("style")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"width: 100%"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"expand"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("slot-scope")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"props"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("p")]),a._v(">")]),a._v("State: {{ props.row.state }}"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("p")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("p")]),a._v(">")]),a._v("City: {{ props.row.city }}"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("p")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("p")]),a._v(">")]),a._v("Address: {{ props.row.address }}"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("p")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("p")]),a._v(">")]),a._v("Zip: {{ props.row.zip }}"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("p")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Date"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"date"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Name"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"name"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),l("span",{attrs:{class:"javascript"}},[a._v("\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("export")]),a._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("default")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("data")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("tableData3")]),a._v(": [{\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-03'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("state")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'California'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("city")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("zip")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'CA 90036'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-02'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("state")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'California'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("city")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("zip")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'CA 90036'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-04'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("state")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'California'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("city")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("zip")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'CA 90036'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-01'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("state")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'California'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("city")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("zip")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'CA 90036'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-08'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("state")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'California'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("city")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("zip")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'CA 90036'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-06'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("state")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'California'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("city")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("zip")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'CA 90036'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2016-05-07'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("state")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'California'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("city")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("address")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'No. 189, Grove St, Los Angeles'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("zip")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'CA 90036'")]),a._v("\n }]\n }\n }\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),a._v("\n")])])])]),a._m(16),l("p",[a._v("For table of numbers, you can add an extra row at the table footer displaying each column's sum.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData6" border show-summary style="width: 100%">\n <el-table-column prop="id" label="ID" width="180">\n </el-table-column>\n <el-table-column prop="name" label="Name">\n </el-table-column>\n <el-table-column prop="amount1" sortable label="Amount 1">\n </el-table-column>\n <el-table-column prop="amount2" sortable label="Amount 2">\n </el-table-column>\n <el-table-column prop="amount3" sortable label="Amount 3">\n </el-table-column>\n </el-table>\n\n <el-table :data="tableData6" border height="200" :summary-method="getSummaries" show-summary style="width: 100%; margin-top: 20px">\n <el-table-column prop="id" label="ID" width="180">\n </el-table-column>\n <el-table-column prop="name" label="Name">\n </el-table-column>\n <el-table-column prop="amount1" label="Cost 1 ($)">\n </el-table-column>\n <el-table-column prop="amount2" label="Cost 2 ($)">\n </el-table-column>\n <el-table-column prop="amount3" label="Cost 3 ($)">\n </el-table-column>\n </el-table>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n return {\n tableData6: [{\n id: '12987122',\n name: 'Tom',\n amount1: '234',\n amount2: '3.2',\n amount3: 10\n }, {\n id: '12987123',\n name: 'Tom',\n amount1: '165',\n amount2: '4.43',\n amount3: 12\n }, {\n id: '12987124',\n name: 'Tom',\n amount1: '324',\n amount2: '1.9',\n amount3: 9\n }, {\n id: '12987125',\n name: 'Tom',\n amount1: '621',\n amount2: '2.2',\n amount3: 17\n }, {\n id: '12987126',\n name: 'Tom',\n amount1: '539',\n amount2: '4.1',\n amount3: 15\n }]\n };\n },\n methods: {\n getSummaries: function(param) {\n var columns = param.columns;\n var data = param.data;\n var sums = [];\n columns.forEach(function(column, index) {\n if (index === 0) {\n sums[index] = 'Total Cost';\n return;\n }\n var values = data.map(function(item) { return Number(item[column.property]); });\n if (!values.every(function(value) { return isNaN(value); })) {\n sums[index] = '$ ' + values.reduce(function(prev, curr) {\n var value = Number(curr);\n if (!isNaN(value)) {\n return prev + curr;\n } else {\n return prev;\n }\n }, 0);\n } else {\n sums[index] = 'N/A';\n }\n });\n\n return sums;\n }\n }\n };\n",style:null}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[l("el-table",{staticStyle:{width:"100%"},attrs:{data:a.tableData6,border:"","show-summary":""}},[l("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),l("el-table-column",{attrs:{prop:"name",label:"Name"}}),l("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Amount 1"}}),l("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Amount 2"}}),l("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Amount 3"}})],1),l("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:a.tableData6,border:"",height:"200","summary-method":a.getSummaries,"show-summary":""}},[l("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),l("el-table-column",{attrs:{prop:"name",label:"Name"}}),l("el-table-column",{attrs:{prop:"amount1",label:"Cost 1 ($)"}}),l("el-table-column",{attrs:{prop:"amount2",label:"Cost 2 ($)"}}),l("el-table-column",{attrs:{prop:"amount3",label:"Cost 3 ($)"}})],1)]],2),l("p",[a._v("You can add the summary row by setting "),l("code",[a._v("show-summary")]),a._v(" to "),l("code",[a._v("true")]),a._v(". By default, for the summary row, the first column does not sum anything up but always displays 'Sum' (you can configure the displayed text using "),l("code",[a._v("sum-text")]),a._v("), while other columns sum every number in that column up and display them. You can of course define your own sum behaviour. To do so, pass a method to "),l("code",[a._v("summary-method")]),a._v(", which returns an array, and each element of the returned array will be displayed in the columns of the summary row. The second table of this example is a detailed demo.")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":data")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"tableData6"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("border")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("show-summary")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("style")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"width: 100%"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"id"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"ID"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"180"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"name"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Name"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"amount1"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("sortable")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Amount 1"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"amount2"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("sortable")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Amount 2"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"amount3"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("sortable")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Amount 3"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v(">")]),a._v("\n\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":data")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"tableData6"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("border")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("height")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"200"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":summary-method")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"getSummaries"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("show-summary")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("style")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"width: 100%; margin-top: 20px"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"id"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"ID"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"180"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"name"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Name"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"amount1"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Cost 1 ($)"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"amount2"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Cost 2 ($)"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"amount3"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Cost 3 ($)"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),l("span",{attrs:{class:"javascript"}},[a._v("\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("export")]),a._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("default")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("data")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("tableData6")]),a._v(": [{\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("id")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'12987122'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("amount1")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'234'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("amount2")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'3.2'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("amount3")]),a._v(": "),l("span",{attrs:{class:"hljs-number"}},[a._v("10")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("id")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'12987123'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("amount1")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'165'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("amount2")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'4.43'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("amount3")]),a._v(": "),l("span",{attrs:{class:"hljs-number"}},[a._v("12")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("id")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'12987124'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("amount1")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'324'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("amount2")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'1.9'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("amount3")]),a._v(": "),l("span",{attrs:{class:"hljs-number"}},[a._v("9")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("id")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'12987125'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("amount1")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'621'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("amount2")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2.2'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("amount3")]),a._v(": "),l("span",{attrs:{class:"hljs-number"}},[a._v("17")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("id")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'12987126'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("amount1")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'539'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("amount2")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'4.1'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("amount3")]),a._v(": "),l("span",{attrs:{class:"hljs-number"}},[a._v("15")]),a._v("\n }]\n };\n },\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("methods")]),a._v(": {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("getSummaries")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("param")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("var")]),a._v(" columns = param.columns;\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("var")]),a._v(" data = param.data;\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("var")]),a._v(" sums = [];\n columns.forEach("),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("column, index")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("if")]),a._v(" (index === "),l("span",{attrs:{class:"hljs-number"}},[a._v("0")]),a._v(") {\n sums[index] = "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Total Cost'")]),a._v(";\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(";\n }\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("var")]),a._v(" values = data.map("),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("item")]),a._v(") ")]),a._v("{ "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" "),l("span",{attrs:{class:"hljs-built_in"}},[a._v("Number")]),a._v("(item[column.property]); });\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("if")]),a._v(" (!values.every("),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("value")]),a._v(") ")]),a._v("{ "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" "),l("span",{attrs:{class:"hljs-built_in"}},[a._v("isNaN")]),a._v("(value); })) {\n sums[index] = "),l("span",{attrs:{class:"hljs-string"}},[a._v("'$ '")]),a._v(" + values.reduce("),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("prev, curr")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("var")]),a._v(" value = "),l("span",{attrs:{class:"hljs-built_in"}},[a._v("Number")]),a._v("(curr);\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("if")]),a._v(" (!"),l("span",{attrs:{class:"hljs-built_in"}},[a._v("isNaN")]),a._v("(value)) {\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" prev + curr;\n } "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("else")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" prev;\n }\n }, "),l("span",{attrs:{class:"hljs-number"}},[a._v("0")]),a._v(");\n } "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("else")]),a._v(" {\n sums[index] = "),l("span",{attrs:{class:"hljs-string"}},[a._v("'N/A'")]),a._v(";\n }\n });\n\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" sums;\n }\n }\n };\n")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),a._v("\n")])])])]),a._m(17),l("p",[a._v("Configuring rowspan and colspan allows you to merge cells")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div>\n <el-table :data="tableData6" :span-method="arraySpanMethod" border style="width: 100%">\n <el-table-column prop="id" label="ID" width="180">\n </el-table-column>\n <el-table-column prop="name" label="Name">\n </el-table-column>\n <el-table-column prop="amount1" sortable label="Amount 1">\n </el-table-column>\n <el-table-column prop="amount2" sortable label="Amount 2">\n </el-table-column>\n <el-table-column prop="amount3" sortable label="Amount 3">\n </el-table-column>\n </el-table>\n\n <el-table :data="tableData6" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">\n <el-table-column prop="id" label="ID" width="180">\n </el-table-column>\n <el-table-column prop="name" label="Name">\n </el-table-column>\n <el-table-column prop="amount1" label="Amount 1">\n </el-table-column>\n <el-table-column prop="amount2" label="Amount 2">\n </el-table-column>\n <el-table-column prop="amount3" label="Amount 3">\n </el-table-column>\n </el-table>\n </div>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n tableData6: [{\n id: '12987122',\n name: 'Tom',\n amount1: '234',\n amount2: '3.2',\n amount3: 10\n }, {\n id: '12987123',\n name: 'Tom',\n amount1: '165',\n amount2: '4.43',\n amount3: 12\n }, {\n id: '12987124',\n name: 'Tom',\n amount1: '324',\n amount2: '1.9',\n amount3: 9\n }, {\n id: '12987125',\n name: 'Tom',\n amount1: '621',\n amount2: '2.2',\n amount3: 17\n }, {\n id: '12987126',\n name: 'Tom',\n amount1: '539',\n amount2: '4.1',\n amount3: 15\n }]\n };\n },\n methods: {\n arraySpanMethod: function({ row, column, rowIndex, columnIndex }) {\n if (rowIndex % 2 === 0) {\n if (columnIndex === 0) {\n return [1, 2];\n } else if (columnIndex === 1) {\n return [0, 0];\n }\n }\n },\n\n objectSpanMethod: function({ row, column, rowIndex, columnIndex }) {\n if (columnIndex === 0) {\n if (rowIndex % 2 === 0) {\n return {\n rowspan: 2,\n colspan: 1\n };\n } else {\n return {\n rowspan: 0,\n colspan: 0\n };\n }\n }\n }\n }\n };\n",style:null}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[l("div",[l("el-table",{staticStyle:{width:"100%"},attrs:{data:a.tableData6,"span-method":a.arraySpanMethod,border:""}},[l("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),l("el-table-column",{attrs:{prop:"name",label:"Name"}}),l("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Amount 1"}}),l("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Amount 2"}}),l("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Amount 3"}})],1),l("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:a.tableData6,"span-method":a.objectSpanMethod,border:""}},[l("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),l("el-table-column",{attrs:{prop:"name",label:"Name"}}),l("el-table-column",{attrs:{prop:"amount1",label:"Amount 1"}}),l("el-table-column",{attrs:{prop:"amount2",label:"Amount 2"}}),l("el-table-column",{attrs:{prop:"amount3",label:"Amount 3"}})],1)],1)]],2),l("p",[a._v("Use the "),l("code",[a._v("span-method")]),a._v(" attribute to configure rowspan and colspan. It accepts a method, and passes an object to that method including current row "),l("code",[a._v("row")]),a._v(", current column "),l("code",[a._v("column")]),a._v(", current row index "),l("code",[a._v("rowIndex")]),a._v(" and current column index "),l("code",[a._v("columnIndex")]),a._v(". The method should return an array of two numbers, the first number being "),l("code",[a._v("rowspan")]),a._v(" and second "),l("code",[a._v("colspan")]),a._v(". It can also return an object with "),l("code",[a._v("rowspan")]),a._v(" and "),l("code",[a._v("colspan")]),a._v(" props.")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("div")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":data")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"tableData6"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":span-method")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"arraySpanMethod"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("border")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("style")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"width: 100%"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"id"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"ID"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"180"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"name"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Name"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"amount1"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("sortable")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Amount 1"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"amount2"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("sortable")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Amount 2"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"amount3"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("sortable")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Amount 3"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v(">")]),a._v("\n\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":data")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"tableData6"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":span-method")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"objectSpanMethod"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("border")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("style")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"width: 100%; margin-top: 20px"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"id"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"ID"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("width")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"180"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"name"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Name"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"amount1"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Amount 1"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"amount2"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Amount 2"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("prop")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"amount3"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Amount 3"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table-column")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-table")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("div")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),l("span",{attrs:{class:"javascript"}},[a._v("\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("export")]),a._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("default")]),a._v(" {\n data() {\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("tableData6")]),a._v(": [{\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("id")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'12987122'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("amount1")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'234'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("amount2")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'3.2'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("amount3")]),a._v(": "),l("span",{attrs:{class:"hljs-number"}},[a._v("10")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("id")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'12987123'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("amount1")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'165'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("amount2")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'4.43'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("amount3")]),a._v(": "),l("span",{attrs:{class:"hljs-number"}},[a._v("12")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("id")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'12987124'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("amount1")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'324'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("amount2")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'1.9'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("amount3")]),a._v(": "),l("span",{attrs:{class:"hljs-number"}},[a._v("9")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("id")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'12987125'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("amount1")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'621'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("amount2")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2.2'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("amount3")]),a._v(": "),l("span",{attrs:{class:"hljs-number"}},[a._v("17")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("id")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'12987126'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tom'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("amount1")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'539'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("amount2")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'4.1'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("amount3")]),a._v(": "),l("span",{attrs:{class:"hljs-number"}},[a._v("15")]),a._v("\n }]\n };\n },\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("methods")]),a._v(": {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("arraySpanMethod")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("{ row, column, rowIndex, columnIndex }")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("if")]),a._v(" (rowIndex % "),l("span",{attrs:{class:"hljs-number"}},[a._v("2")]),a._v(" === "),l("span",{attrs:{class:"hljs-number"}},[a._v("0")]),a._v(") {\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("if")]),a._v(" (columnIndex === "),l("span",{attrs:{class:"hljs-number"}},[a._v("0")]),a._v(") {\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" ["),l("span",{attrs:{class:"hljs-number"}},[a._v("1")]),a._v(", "),l("span",{attrs:{class:"hljs-number"}},[a._v("2")]),a._v("];\n } "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("else")]),a._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("if")]),a._v(" (columnIndex === "),l("span",{attrs:{class:"hljs-number"}},[a._v("1")]),a._v(") {\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" ["),l("span",{attrs:{class:"hljs-number"}},[a._v("0")]),a._v(", "),l("span",{attrs:{class:"hljs-number"}},[a._v("0")]),a._v("];\n }\n }\n },\n\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("objectSpanMethod")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("{ row, column, rowIndex, columnIndex }")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("if")]),a._v(" (columnIndex === "),l("span",{attrs:{class:"hljs-number"}},[a._v("0")]),a._v(") {\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("if")]),a._v(" (rowIndex % "),l("span",{attrs:{class:"hljs-number"}},[a._v("2")]),a._v(" === "),l("span",{attrs:{class:"hljs-number"}},[a._v("0")]),a._v(") {\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("rowspan")]),a._v(": "),l("span",{attrs:{class:"hljs-number"}},[a._v("2")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("colspan")]),a._v(": "),l("span",{attrs:{class:"hljs-number"}},[a._v("1")]),a._v("\n };\n } "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("else")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("rowspan")]),a._v(": "),l("span",{attrs:{class:"hljs-number"}},[a._v("0")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("colspan")]),a._v(": "),l("span",{attrs:{class:"hljs-number"}},[a._v("0")]),a._v("\n };\n }\n }\n }\n }\n };\n")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),a._v("\n")])])])]),a._m(18),a._m(19),a._m(20),a._m(21),a._m(22),a._m(23),a._m(24),a._m(25),a._m(26),a._m(27)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"table"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#table","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"basic-table"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-table","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic table")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"striped-table"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#striped-table","aria-hidden":"true"}},[this._v("¶")]),this._v(" Striped Table")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"table-with-border"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#table-with-border","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table with border")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"table-with-status"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#table-with-status","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table with status")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"table-with-fixed-header"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-header","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table with fixed header")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"table-with-fixed-column"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-column","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table with fixed column")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"table-with-fixed-columns-and-header"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-columns-and-header","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table with fixed columns and header")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"fluid-height-table-with-fixed-header-and-columns"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#fluid-height-table-with-fixed-header-and-columns","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fluid-height Table with fixed header (and columns)")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"grouping-table-head"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#grouping-table-head","aria-hidden":"true"}},[this._v("¶")]),this._v(" Grouping table head")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"single-select"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#single-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Single select")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"multiple-select"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#multiple-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Multiple select")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"sorting"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#sorting","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sorting")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"filter"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#filter","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filter")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"custom-column-template"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#custom-column-template","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom column template")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"expandable-row"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#expandable-row","aria-hidden":"true"}},[this._v("¶")]),this._v(" Expandable row")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"summary-row"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#summary-row","aria-hidden":"true"}},[this._v("¶")]),this._v(" Summary row")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"rowspan-and-colspan"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#rowspan-and-colspan","aria-hidden":"true"}},[this._v("¶")]),this._v(" Rowspan and colspan")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"table-attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#table-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("data")]),t("td",[s._v("table data")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("height")]),t("td",[s._v("Table's height. By default it has an "),t("code",{pre:!0},[s._v("auto")]),s._v(" height. If its value is a number, the height is measured in pixels; if its value is a string, the height is affected by external styles")]),t("td",[s._v("string/number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("max-height")]),t("td",[s._v("Table's max-height. The height of the table starts from "),t("code",{pre:!0},[s._v("auto")]),s._v(" until it reaches the maxHeight limit. The "),t("code",{pre:!0},[s._v("maxHeight")]),s._v(" is measured in pixels, same as "),t("code",{pre:!0},[s._v("height")])]),t("td",[s._v("string/number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("stripe")]),t("td",[s._v("whether table is striped")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("border")]),t("td",[s._v("whether table has vertical border")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("fit")]),t("td",[s._v("whether width of column automatically fits its container")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("show-header")]),t("td",[s._v("whether table header is visible")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("highlight-current-row")]),t("td",[s._v("whether current row is highlighted")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("current-row-key")]),t("td",[s._v("key of current row, a set only prop")]),t("td",[s._v("string,number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("row-class-name")]),t("td",[s._v("function that returns custom class names for a row, or a string assigning class names for every row")]),t("td",[s._v("Function(row, index)/String")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("row-style")]),t("td",[s._v("function that returns custom style for a row, or a string assigning custom style for every row")]),t("td",[s._v("Function(row, index)/Object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("row-key")]),t("td",[s._v("key of row data, used for optimizing rendering. Required if "),t("code",{pre:!0},[s._v("reserve-selection")]),s._v(" is on. When its type is String, multi-level access is supported, e.g. "),t("code",{pre:!0},[s._v("user.info.id")]),s._v(", but "),t("code",{pre:!0},[s._v("user.info[0].id")]),s._v(" is not supported, in which case "),t("code",{pre:!0},[s._v("Function")]),s._v(" should be used.")]),t("td",[s._v("Function(row)/String")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("empty-text")]),t("td",[s._v("Displayed text when data is empty. You can customize this area with "),t("code",{pre:!0},[s._v('slot="empty"')])]),t("td",[s._v("String")]),t("td",[s._v("—")]),t("td",[s._v("No Data")])]),t("tr",[t("td",[s._v("default-expand-all")]),t("td",[s._v('whether expand all rows by default, only works when the table has a column type="expand"')]),t("td",[s._v("Boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("expand-row-keys")]),t("td",[s._v("set expanded rows by this prop, prop's value is the keys of expand rows, you should set row-key before using this prop")]),t("td",[s._v("Array")]),t("td",[s._v("—")]),t("td")]),t("tr",[t("td",[s._v("default-sort")]),t("td",[s._v("set the default sort column and order. property "),t("code",{pre:!0},[s._v("prop")]),s._v(" is used to set default sort column, property "),t("code",{pre:!0},[s._v("order")]),s._v(" is used to set default sort order")]),t("td",[s._v("Object")]),t("td",[t("code",{pre:!0},[s._v("order")]),s._v(": ascending, descending")]),t("td",[s._v("if "),t("code",{pre:!0},[s._v("prop")]),s._v(" is set, and "),t("code",{pre:!0},[s._v("order")]),s._v(" is not set, then "),t("code",{pre:!0},[s._v("order")]),s._v(" is default to ascending")])]),t("tr",[t("td",[s._v("tooltip-effect")]),t("td",[s._v("tooltip "),t("code",{pre:!0},[s._v("effect")]),s._v(" property")]),t("td",[s._v("String")]),t("td",[s._v("dark/light")]),t("td")]),t("tr",[t("td",[s._v("show-summary")]),t("td",[s._v("whether to display a summary row")]),t("td",[s._v("Boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("sum-text")]),t("td",[s._v("displayed text for the first column of summary row")]),t("td",[s._v("String")]),t("td",[s._v("—")]),t("td",[s._v("Sum")])]),t("tr",[t("td",[s._v("summary-method")]),t("td",[s._v("custom summary method")]),t("td",[s._v("Function({ columns, data })")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"table-events"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#table-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table Events")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Event Name")]),t("th",[s._v("Description")]),t("th",[s._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[s._v("select")]),t("td",[s._v("triggers when user clicks the checkbox in a row")]),t("td",[s._v("selection, row")])]),t("tr",[t("td",[s._v("select-all")]),t("td",[s._v("triggers when user clicks the checkbox in table header")]),t("td",[s._v("selection")])]),t("tr",[t("td",[s._v("selection-change")]),t("td",[s._v("triggers when selection changes")]),t("td",[s._v("selection")])]),t("tr",[t("td",[s._v("cell-mouse-enter")]),t("td",[s._v("triggers when hovering into a cell")]),t("td",[s._v("row, column, cell, event")])]),t("tr",[t("td",[s._v("cell-mouse-leave")]),t("td",[s._v("triggers when hovering out of a cell")]),t("td",[s._v("row, column, cell, event")])]),t("tr",[t("td",[s._v("cell-click")]),t("td",[s._v("triggers when clicking a cell")]),t("td",[s._v("row, column, cell, event")])]),t("tr",[t("td",[s._v("cell-dblclick")]),t("td",[s._v("triggers when double clicking a cell")]),t("td",[s._v("row, column, cell, event")])]),t("tr",[t("td",[s._v("row-click")]),t("td",[s._v("triggers when clicking a row")]),t("td",[s._v("row, event, column")])]),t("tr",[t("td",[s._v("row-contextmenu")]),t("td",[s._v("triggers when user right clicks on a row")]),t("td",[s._v("row, event")])]),t("tr",[t("td",[s._v("row-dblclick")]),t("td",[s._v("triggers when double clicking a row")]),t("td",[s._v("row, event")])]),t("tr",[t("td",[s._v("header-click")]),t("td",[s._v("triggers when clicking a column header")]),t("td",[s._v("column, event")])]),t("tr",[t("td",[s._v("sort-change")]),t("td",[s._v("triggers when Table's sorting changes")]),t("td",[s._v("{ column, prop, order }")])]),t("tr",[t("td",[s._v("filter-change")]),t("td",[s._v("column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered")]),t("td",[s._v("filters")])]),t("tr",[t("td",[s._v("current-change")]),t("td",[s._v("triggers when current row changes")]),t("td",[s._v("currentRow, oldCurrentRow")])]),t("tr",[t("td",[s._v("header-dragend")]),t("td",[s._v("triggers when finish dragging header")]),t("td",[s._v("newWidth, oldWidth, column, event")])]),t("tr",[t("td",[s._v("expand")]),t("td",[s._v("triggers when user expands or collapses a row")]),t("td",[s._v("row, expanded")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"table-methods"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#table-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table Methods")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Method")]),t("th",[s._v("Description")]),t("th",[s._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[s._v("clearSelection")]),t("td",[s._v("used in multiple selection Table, clear selection, might be useful when "),t("code",{pre:!0},[s._v("reserve-selection")]),s._v(" is on")]),t("td",[s._v("selection")])]),t("tr",[t("td",[s._v("toggleRowSelection")]),t("td",[s._v("used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected")]),t("td",[s._v("row, selected")])]),t("tr",[t("td",[s._v("setCurrentRow")]),t("td",[s._v("used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection.")]),t("td",[s._v("row")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"table-slot"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#table-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table Slot")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Name")]),t("th",[s._v("Description")])])]),t("tbody",[t("tr",[t("td",[s._v("append")]),t("td",[s._v("Contents to be inserted after the last row. It is still nested inside the "),t("code",{pre:!0},[s._v("<tbody>")]),s._v(" tag. You may need this slot if you want to implement infinite scroll for the table. This slot will be displayed above the summary row if there is one.")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"table-column-attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#table-column-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table-column Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("type")]),t("td",[s._v("type of the column. If set to "),t("code",{pre:!0},[s._v("selection")]),s._v(", the column will display checkbox. If set to "),t("code",{pre:!0},[s._v("index")]),s._v(", the column will display index of the row (staring from 1). If set to "),t("code",{pre:!0},[s._v("expand")]),s._v(", the column will display expand icon.")]),t("td",[s._v("string")]),t("td",[s._v("selection/index/expand")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("label")]),t("td",[s._v("column label")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("column-key")]),t("td",[s._v("column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered")]),t("td",[s._v("string")]),t("td",[s._v("string")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("prop")]),t("td",[s._v("field name. You can also use its alias: "),t("code",{pre:!0},[s._v("property")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("width")]),t("td",[s._v("column width")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("min-width")]),t("td",[s._v("column minimum width. Columns with "),t("code",{pre:!0},[s._v("width")]),s._v(" has a fixed width, while columns with "),t("code",{pre:!0},[s._v("min-width")]),s._v(" has a width that is distributed in proportion")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("fixed")]),t("td",[s._v("whether column is fixed at left/right. Will be fixed at left if "),t("code",{pre:!0},[s._v("true")])]),t("td",[s._v("string/boolean")]),t("td",[s._v("true/left/right")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("render-header")]),t("td",[s._v("render function for table header of this column")]),t("td",[s._v("Function(h, { column, $index })")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("sortable")]),t("td",[s._v("whether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the "),t("code",{pre:!0},[s._v("sort-change")]),s._v(" event of Table")]),t("td",[s._v("boolean, string")]),t("td",[s._v("true, false, custom")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("sort-method")]),t("td",[s._v("sorting method, works when "),t("code",{pre:!0},[s._v("sortable")]),s._v(" is "),t("code",{pre:!0},[s._v("true")]),s._v(". Should return a boolean.")]),t("td",[s._v("Function(a, b)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("resizable")]),t("td",[s._v("whether column width can be resized, works when "),t("code",{pre:!0},[s._v("border")]),s._v(" of "),t("code",{pre:!0},[s._v("el-table")]),s._v(" is "),t("code",{pre:!0},[s._v("true")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("formatter")]),t("td",[s._v("function that formats cell content")]),t("td",[s._v("Function(row, column, cellValue)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("show-overflow-tooltip")]),t("td",[s._v("whether to hide extra content and show them in a tooltip when hovering on the cell")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("align")]),t("td",[s._v("alignment")]),t("td",[s._v("string")]),t("td",[s._v("left/center/right")]),t("td",[s._v("left")])]),t("tr",[t("td",[s._v("header-align")]),t("td",[s._v("alignment of the table header. If omitted, the value of the above "),t("code",{pre:!0},[s._v("align")]),s._v(" attribute will be applied")]),t("td",[s._v("String")]),t("td",[s._v("left/center/right")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("class-name")]),t("td",[s._v("class name of cells in the column")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("label-class-name")]),t("td",[s._v("class name of the label of this column")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("selectable")]),t("td",[s._v("function that determines if a certain row can be selected, works when "),t("code",{pre:!0},[s._v("type")]),s._v(" is 'selection'")]),t("td",[s._v("Function(row, index)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("reserve-selection")]),t("td",[s._v("whether to reserve selection after data refreshing, works when "),t("code",{pre:!0},[s._v("type")]),s._v(" is 'selection'")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("filters")]),t("td",[s._v("an array of data filtering options. For each element in this array, "),t("code",{pre:!0},[s._v("text")]),s._v(" and "),t("code",{pre:!0},[s._v("value")]),s._v(" are required")]),t("td",[s._v("Array[{ text, value }]")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("filter-placement")]),t("td",[s._v("placement for the filter dropdown")]),t("td",[s._v("String")]),t("td",[s._v("same as Tooltip's "),t("code",{pre:!0},[s._v("placement")])]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("filter-multiple")]),t("td",[s._v("whether data filtering supports multiple options")]),t("td",[s._v("Boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("filter-method")]),t("td",[s._v("data filtering method. If "),t("code",{pre:!0},[s._v("filter-multiple")]),s._v(" is on, this method will be called multiple times for each row, and a row will display if one of the calls returns "),t("code",{pre:!0},[s._v("true")])]),t("td",[s._v("Function(value, row)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("filtered-value")]),t("td",[s._v("filter value for selected data, might be useful when table header is rendered with "),t("code",{pre:!0},[s._v("render-header")])]),t("td",[s._v("Array")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])}],!1,null,null,null);t.default=a.exports},869:function(s,t,a){"use strict";a.r(t);var l={data:function(){return{activeName:"second",activeName2:"first",editableTabsValue:"2",editableTabsValue2:"2",editableTabs:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],editableTabs2:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],tabIndex:2}},methods:{handleClick:function(s,t){console.log(s,t)},handleTabsEdit:function(a,s){var t,l,n;"add"===s&&(t=++this.tabIndex+"",this.editableTabs.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue=t),"remove"===s&&(l=this.editableTabs,(n=this.editableTabsValue)===a&&l.forEach(function(s,t){s.name===a&&(s=l[t+1]||l[t-1])&&(n=s.name)}),this.editableTabsValue=n,this.editableTabs=l.filter(function(s){return s.name!==a}))},addTab:function(s){var t=++this.tabIndex+"";this.editableTabs2.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue2=t},removeTab:function(a){var l=this.editableTabs2,n=this.editableTabsValue2;n===a&&l.forEach(function(s,t){s.name===a&&(s=l[t+1]||l[t-1])&&(n=s.name)}),this.editableTabsValue2=n,this.editableTabs2=l.filter(function(s){return s.name!==a})}}},a=a(0),a=Object(a.a)(l,function(){var a=this,s=a.$createElement,l=a._self._c||s;return l("section",[a._m(0),l("p",[a._v("Divide data collections which are related yet belong to different types.")]),a._m(1),l("p",[a._v("Basic and concise tabs.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-tabs v-model="activeName" @tab-click="handleClick">\n <el-tab-pane label="User" name="first">User</el-tab-pane>\n <el-tab-pane label="Config" name="second">Config</el-tab-pane>\n <el-tab-pane label="Role" name="third">Role</el-tab-pane>\n <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>\n </el-tabs>\n</template>\n\n',script:"\n export default {\n data: function() {\n return {\n activeName: 'first'\n };\n },\n methods: {\n handleClick: function(tab, event) {\n console.log(tab, event);\n }\n }\n };\n",style:null}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[l("el-tabs",{on:{"tab-click":a.handleClick},model:{value:a.activeName,callback:function(s){a.activeName=s},expression:"activeName"}},[l("el-tab-pane",{attrs:{label:"User",name:"first"}},[a._v("User")]),l("el-tab-pane",{attrs:{label:"Config",name:"second"}},[a._v("Config")]),l("el-tab-pane",{attrs:{label:"Role",name:"third"}},[a._v("Role")]),l("el-tab-pane",{attrs:{label:"Task",name:"fourth"}},[a._v("Task")])],1)]],2),l("p",[a._v("Tabs provide a selective card functionality. By default the first tab is selected as active, and you can activate any tab by setting the "),l("code",[a._v("value")]),a._v(" attribute.")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tabs")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"activeName"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("@tab-click")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"handleClick"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"User"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"first"')]),a._v(">")]),a._v("User"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Config"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"second"')]),a._v(">")]),a._v("Config"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Role"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"third"')]),a._v(">")]),a._v("Role"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Task"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"fourth"')]),a._v(">")]),a._v("Task"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tabs")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),l("span",{attrs:{class:"javascript"}},[a._v("\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("export")]),a._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("default")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("data")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("activeName")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'first'")]),a._v("\n };\n },\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("methods")]),a._v(": {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("handleClick")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("tab, event")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-built_in"}},[a._v("console")]),a._v(".log(tab, event);\n }\n }\n };\n")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),a._v("\n")])])])]),a._m(2),l("p",[a._v("Tabs styled as cards.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-tabs type="card" @tab-click="handleClick">\n <el-tab-pane label="User">User</el-tab-pane>\n <el-tab-pane label="Config">Config</el-tab-pane>\n <el-tab-pane label="Role">Role</el-tab-pane>\n <el-tab-pane label="Task">Task</el-tab-pane>\n </el-tabs>\n</template>\n\n',script:"\n export default {\n data: function() {\n return {\n activeName: 'first'\n };\n },\n methods: {\n handleClick: function(tab, event) {\n console.log(tab, event);\n }\n }\n };\n",style:null}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[l("el-tabs",{attrs:{type:"card"},on:{"tab-click":a.handleClick}},[l("el-tab-pane",{attrs:{label:"User"}},[a._v("User")]),l("el-tab-pane",{attrs:{label:"Config"}},[a._v("Config")]),l("el-tab-pane",{attrs:{label:"Role"}},[a._v("Role")]),l("el-tab-pane",{attrs:{label:"Task"}},[a._v("Task")])],1)]],2),l("p",[a._v("Set "),l("code",[a._v("type")]),a._v(" to "),l("code",[a._v("card")]),a._v(" can get a card-styled tab.")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tabs")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"card"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("@tab-click")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"handleClick"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"User"')]),a._v(">")]),a._v("User"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Config"')]),a._v(">")]),a._v("Config"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Role"')]),a._v(">")]),a._v("Role"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Task"')]),a._v(">")]),a._v("Task"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tabs")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("template")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),l("span",{attrs:{class:"javascript"}},[a._v("\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("export")]),a._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("default")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("data")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("activeName")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'first'")]),a._v("\n };\n },\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("methods")]),a._v(": {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("handleClick")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("tab, event")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-built_in"}},[a._v("console")]),a._v(".log(tab, event);\n }\n }\n };\n")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),a._v("\n")])])])]),a._m(3),l("p",[a._v("Border card tabs.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tabs type="border-card">\n <el-tab-pane label="User">User</el-tab-pane>\n <el-tab-pane label="Config">Config</el-tab-pane>\n <el-tab-pane label="Role">Role</el-tab-pane>\n <el-tab-pane label="Task">Task</el-tab-pane>\n</el-tabs>\n',script:null,style:null}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[l("el-tabs",{attrs:{type:"border-card"}},[l("el-tab-pane",{attrs:{label:"User"}},[a._v("User")]),l("el-tab-pane",{attrs:{label:"Config"}},[a._v("Config")]),l("el-tab-pane",{attrs:{label:"Role"}},[a._v("Role")]),l("el-tab-pane",{attrs:{label:"Task"}},[a._v("Task")])],1)],1),l("p",[a._v("Set "),l("code",[a._v("type")]),a._v(" to "),l("code",[a._v("border-card")]),a._v(".")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tabs")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"border-card"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"User"')]),a._v(">")]),a._v("User"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Config"')]),a._v(">")]),a._v("Config"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Role"')]),a._v(">")]),a._v("Role"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Task"')]),a._v(">")]),a._v("Task"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tabs")]),a._v(">")]),a._v("\n")])])])]),a._m(4),l("p",[a._v("You can use named slot to customize the tab label content.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tabs type="border-card">\n <el-tab-pane>\n <span slot="label"><i class="el-icon-date"></i> Route</span>\n Route\n </el-tab-pane>\n <el-tab-pane label="Config">Config</el-tab-pane>\n <el-tab-pane label="Role">Role</el-tab-pane>\n <el-tab-pane label="Task">Task</el-tab-pane>\n</el-tabs>\n',script:null,style:null}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[l("el-tabs",{attrs:{type:"border-card"}},[l("el-tab-pane",[l("span",{attrs:{slot:"label"},slot:"label"},[l("i",{staticClass:"el-icon-date"}),a._v(" Route")]),a._v("\n Route\n ")]),l("el-tab-pane",{attrs:{label:"Config"}},[a._v("Config")]),l("el-tab-pane",{attrs:{label:"Role"}},[a._v("Role")]),l("el-tab-pane",{attrs:{label:"Task"}},[a._v("Task")])],1)],1),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tabs")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"border-card"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("span")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("slot")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"label"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("i")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("class")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"el-icon-date"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("i")]),a._v(">")]),a._v(" Route"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("span")]),a._v(">")]),a._v("\n Route\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Config"')]),a._v(">")]),a._v("Config"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Role"')]),a._v(">")]),a._v("Role"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"Task"')]),a._v(">")]),a._v("Task"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tabs")]),a._v(">")]),a._v("\n")])])])]),a._m(5),l("p",[a._v("Only card type Tabs support addable & closeable.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">\n <el-tab-pane v-for="(item, index) in editableTabs" :key="item.name" :label="item.title" :name="item.name">\n {{item.content}}\n </el-tab-pane>\n</el-tabs>\n\n',script:"\n export default {\n data: function() {\n return {\n editableTabsValue: '2',\n editableTabs: [{\n title: 'Tab 1',\n name: '1',\n content: 'Tab 1 content'\n }, {\n title: 'Tab 2',\n name: '2',\n content: 'Tab 2 content'\n }],\n tabIndex: 2\n }\n },\n methods: {\n handleTabsEdit: function(targetName, action) {\n if (action === 'add') {\n var newTabName = ++this.tabIndex + '';\n this.editableTabs.push({\n title: 'New Tab',\n name: newTabName,\n content: 'New Tab content'\n });\n this.editableTabsValue = newTabName;\n }\n if (action === 'remove') {\n var tabs = this.editableTabs;\n var activeName = this.editableTabsValue;\n if (activeName === targetName) {\n tabs.forEach(function(tab, index) {\n if (tab.name === targetName) {\n var nextTab = tabs[index + 1] || tabs[index - 1];\n if (nextTab) {\n activeName = nextTab.name;\n }\n }\n });\n }\n \n this.editableTabsValue = activeName;\n this.editableTabs = tabs.filter(function(tab) { return tab.name !== targetName; });\n }\n }\n }\n }\n",style:null}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[l("el-tabs",{attrs:{type:"card",editable:""},on:{edit:a.handleTabsEdit},model:{value:a.editableTabsValue,callback:function(s){a.editableTabsValue=s},expression:"editableTabsValue"}},a._l(a.editableTabs,function(s,t){return l("el-tab-pane",{key:s.name,attrs:{label:s.title,name:s.name}},[a._v("\n "+a._s(s.content)+"\n ")])}))],1),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tabs")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"editableTabsValue"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"card"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("editable")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("@edit")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"handleTabsEdit"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-for")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"(item, index) in editableTabs"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":key")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"item.name"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"item.title"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":name")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"item.name"')]),a._v("\n >")]),a._v("\n {{item.content}}\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tabs")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),l("span",{attrs:{class:"javascript"}},[a._v("\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("export")]),a._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("default")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("data")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("editableTabsValue")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("editableTabs")]),a._v(": [{\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("title")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tab 1'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'1'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("content")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tab 1 content'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("title")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tab 2'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("content")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tab 2 content'")]),a._v("\n }],\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("tabIndex")]),a._v(": "),l("span",{attrs:{class:"hljs-number"}},[a._v("2")]),a._v("\n }\n },\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("methods")]),a._v(": {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("handleTabsEdit")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("targetName, action")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("if")]),a._v(" (action === "),l("span",{attrs:{class:"hljs-string"}},[a._v("'add'")]),a._v(") {\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("var")]),a._v(" newTabName = ++"),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".tabIndex + "),l("span",{attrs:{class:"hljs-string"}},[a._v("''")]),a._v(";\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".editableTabs.push({\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("title")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'New Tab'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": newTabName,\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("content")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'New Tab content'")]),a._v("\n });\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".editableTabsValue = newTabName;\n }\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("if")]),a._v(" (action === "),l("span",{attrs:{class:"hljs-string"}},[a._v("'remove'")]),a._v(") {\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("var")]),a._v(" tabs = "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".editableTabs;\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("var")]),a._v(" activeName = "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".editableTabsValue;\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("if")]),a._v(" (activeName === targetName) {\n tabs.forEach("),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("tab, index")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("if")]),a._v(" (tab.name === targetName) {\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("var")]),a._v(" nextTab = tabs[index + "),l("span",{attrs:{class:"hljs-number"}},[a._v("1")]),a._v("] || tabs[index - "),l("span",{attrs:{class:"hljs-number"}},[a._v("1")]),a._v("];\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("if")]),a._v(" (nextTab) {\n activeName = nextTab.name;\n }\n }\n });\n }\n \n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".editableTabsValue = activeName;\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".editableTabs = tabs.filter("),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("tab")]),a._v(") ")]),a._v("{ "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" tab.name !== targetName; });\n }\n }\n }\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),a._v("\n")])])])]),a._m(6),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div style="margin-bottom: 20px;">\n <el-button size="small" @click="addTab(editableTabsValue2)">\n add tab\n </el-button>\n</div>\n<el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">\n <el-tab-pane v-for="(item, index) in editableTabs2" :key="item.name" :label="item.title" :name="item.name">\n {{item.content}}\n </el-tab-pane>\n</el-tabs>\n\n',script:"\n export default {\n data: function() {\n return {\n editableTabsValue2: '2',\n editableTabs2: [{\n title: 'Tab 1',\n name: '1',\n content: 'Tab 1 content'\n }, {\n title: 'Tab 2',\n name: '2',\n content: 'Tab 2 content'\n }],\n tabIndex: 2\n }\n },\n methods: {\n addTab: function(targetName) {\n var newTabName = ++this.tabIndex + '';\n this.editableTabs2.push({\n title: 'New Tab',\n name: newTabName,\n content: 'New Tab content'\n });\n this.editableTabsValue2 = newTabName;\n },\n removeTab: function(targetName) {\n var tabs = this.editableTabs2;\n var activeName = this.editableTabsValue2;\n if (activeName === targetName) {\n tabs.forEach(function(tab, index) {\n if (tab.name === targetName) {\n var nextTab = tabs[index + 1] || tabs[index - 1];\n if (nextTab) {\n activeName = nextTab.name;\n }\n }\n });\n }\n \n this.editableTabsValue2 = activeName;\n this.editableTabs2 = tabs.filter(function(tab) { return tab.name !== targetName; });\n }\n }\n }\n",style:null}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[l("div",{staticStyle:{"margin-bottom":"20px"}},[l("el-button",{attrs:{size:"small"},on:{click:function(s){a.addTab(a.editableTabsValue2)}}},[a._v("\n add tab\n ")])],1),l("el-tabs",{attrs:{type:"card",closable:""},on:{"tab-remove":a.removeTab},model:{value:a.editableTabsValue2,callback:function(s){a.editableTabsValue2=s},expression:"editableTabsValue2"}},a._l(a.editableTabs2,function(s,t){return l("el-tab-pane",{key:s.name,attrs:{label:s.title,name:s.name}},[a._v("\n "+a._s(s.content)+"\n ")])}))],1),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("div")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("style")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"margin-bottom: 20px;"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("size")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"small"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("@click")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"addTab(editableTabsValue2)"')]),a._v("\n >")]),a._v("\n add tab\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("div")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tabs")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"editableTabsValue2"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"card"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("closable")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("@tab-remove")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"removeTab"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-for")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"(item, index) in editableTabs2"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":key")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"item.name"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":label")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"item.title"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":name")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"item.name"')]),a._v("\n >")]),a._v("\n {{item.content}}\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tab-pane")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tabs")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),l("span",{attrs:{class:"javascript"}},[a._v("\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("export")]),a._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("default")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("data")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("editableTabsValue2")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("editableTabs2")]),a._v(": [{\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("title")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tab 1'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'1'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("content")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tab 1 content'")]),a._v("\n }, {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("title")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tab 2'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'2'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("content")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tab 2 content'")]),a._v("\n }],\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("tabIndex")]),a._v(": "),l("span",{attrs:{class:"hljs-number"}},[a._v("2")]),a._v("\n }\n },\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("methods")]),a._v(": {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("addTab")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("targetName")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("var")]),a._v(" newTabName = ++"),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".tabIndex + "),l("span",{attrs:{class:"hljs-string"}},[a._v("''")]),a._v(";\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".editableTabs2.push({\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("title")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'New Tab'")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": newTabName,\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("content")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'New Tab content'")]),a._v("\n });\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".editableTabsValue2 = newTabName;\n },\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("removeTab")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("targetName")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("var")]),a._v(" tabs = "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".editableTabs2;\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("var")]),a._v(" activeName = "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".editableTabsValue2;\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("if")]),a._v(" (activeName === targetName) {\n tabs.forEach("),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("tab, index")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("if")]),a._v(" (tab.name === targetName) {\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("var")]),a._v(" nextTab = tabs[index + "),l("span",{attrs:{class:"hljs-number"}},[a._v("1")]),a._v("] || tabs[index - "),l("span",{attrs:{class:"hljs-number"}},[a._v("1")]),a._v("];\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("if")]),a._v(" (nextTab) {\n activeName = nextTab.name;\n }\n }\n });\n }\n \n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".editableTabsValue2 = activeName;\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".editableTabs2 = tabs.filter("),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("tab")]),a._v(") ")]),a._v("{ "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" tab.name !== targetName; });\n }\n }\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),a._v("\n")])])])]),a._m(7),a._m(8),a._m(9),a._m(10),a._m(11),a._m(12)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"tabs"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#tabs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabs")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"basic-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"card-style"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#card-style","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card Style")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"border-card"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#border-card","aria-hidden":"true"}},[this._v("¶")]),this._v(" Border card")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"custom-tab"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#custom-tab","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom Tab")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"add-close-tab"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#add-close-tab","aria-hidden":"true"}},[this._v("¶")]),this._v(" Add & close tab")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"customized-trigger-button-of-new-tab"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#customized-trigger-button-of-new-tab","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customized trigger button of new tab")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"tabs-attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#tabs-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabs Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("type")]),t("td",[s._v("type of Tab")]),t("td",[s._v("string")]),t("td",[s._v("card/border-card")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("closable")]),t("td",[s._v("whether Tab is closable")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("addable")]),t("td",[s._v("whether Tab is addable")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("editable")]),t("td",[s._v("whether Tab is addable and closable")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("active-name(deprecated)")]),t("td",[s._v("name of the selected tab")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("name of first tab")])]),t("tr",[t("td",[s._v("value")]),t("td",[s._v("name of the selected tab")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("name of first tab")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"tabs-events"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#tabs-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabs Events")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Event Name")]),t("th",[s._v("Description")]),t("th",[s._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[s._v("tab-click")]),t("td",[s._v("triggers when a tab is clicked")]),t("td",[s._v("clicked tab")])]),t("tr",[t("td",[s._v("tab-remove")]),t("td",[s._v("triggers when tab-remove button is clicked")]),t("td",[s._v("name of the removed tab")])]),t("tr",[t("td",[s._v("tab-add")]),t("td",[s._v("triggers when tab-add button is clicked")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("edit")]),t("td",[s._v("triggers when tab-add button or tab-remove is clicked")]),t("td",[s._v("(targetName, action)")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"tab-pane-attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#tab-pane-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tab-pane Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("label")]),t("td",[s._v("title of the tab")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("whether Tab is disabled")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '1'")])]),t("tr",[t("td",[s._v("closable")]),t("td",[s._v("whether Tab is closable")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])}],!1,null,null,null);t.default=a.exports},870:function(s,t,a){"use strict";a.r(t);var l={data:function(){return{tags:[{name:"Tag 1",type:""},{name:"Tag 2",type:"gray"},{name:"Tag 3",type:"primary"},{name:"Tag 4",type:"success"},{name:"Tag 5",type:"warning"},{name:"Tag 6",type:"danger"}],dynamicTags:["Tag 1","Tag 2","Tag 3"],inputVisible:!1,inputValue:""}},methods:{handleClose:function(s){this.dynamicTags.splice(this.dynamicTags.indexOf(s),1)},showInput:function(){this.inputVisible=!0,this.$nextTick(function(){this.$refs.saveTagInput.$refs.input.focus()})},handleInputConfirm:function(){var s=this.inputValue;s&&this.dynamicTags.push(s),this.inputVisible=!1,this.inputValue=""}}},a=(a(755),a(0)),a=Object(a.a)(l,function(){var a=this,s=a.$createElement,l=a._self._c||s;return l("section",[a._m(0),l("p",[a._v("Used for marking and selection.")]),a._m(1),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tag>Tag One</el-tag>\n<el-tag type="gray">Tag Two</el-tag>\n<el-tag type="primary">Tag Three</el-tag>\n<el-tag type="success">Tag Four</el-tag>\n<el-tag type="warning">Tag Five</el-tag>\n<el-tag type="danger">Tag Six</el-tag>\n',script:null,style:null}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[l("el-tag",[a._v("Tag One")]),l("el-tag",{attrs:{type:"gray"}},[a._v("Tag Two")]),l("el-tag",{attrs:{type:"primary"}},[a._v("Tag Three")]),l("el-tag",{attrs:{type:"success"}},[a._v("Tag Four")]),l("el-tag",{attrs:{type:"warning"}},[a._v("Tag Five")]),l("el-tag",{attrs:{type:"danger"}},[a._v("Tag Six")])],1),l("p",[a._v("Use the "),l("code",[a._v("type")]),a._v(" attribute to define Tag's type. In addition, the "),l("code",[a._v("color")]),a._v(" attribute can be used to set the background color of the Tag.")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tag")]),a._v(">")]),a._v("Tag One"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tag")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tag")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"gray"')]),a._v(">")]),a._v("Tag Two"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tag")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tag")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"primary"')]),a._v(">")]),a._v("Tag Three"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tag")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tag")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"success"')]),a._v(">")]),a._v("Tag Four"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tag")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tag")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"warning"')]),a._v(">")]),a._v("Tag Five"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tag")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tag")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"danger"')]),a._v(">")]),a._v("Tag Six"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tag")]),a._v(">")]),a._v("\n")])])])]),a._m(2),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tag v-for="tag in tags" :key="tag.name" :closable="true" :type="tag.type">\n{{tag.name}}\n</el-tag>\n\n\n',script:"\n export default {\n data: function() {\n return {\n tags: [\n { name: 'Tag 1', type: '' },\n { name: 'Tag 2', type: 'gray' },\n { name: 'Tag 3', type: 'primary' },\n { name: 'Tag 4', type: 'success' },\n { name: 'Tag 5', type: 'warning' },\n { name: 'Tag 6', type: 'danger' }\n ]\n };\n }\n }\n",style:null}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},a._l(a.tags,function(s){return l("el-tag",{key:s.name,attrs:{closable:!0,type:s.type}},[a._v("\n"+a._s(s.name)+"\n")])})),l("p",[l("code",[a._v("closable")]),a._v(" attribute can be used to define a removable tag. It accepts a "),l("code",[a._v("Boolean")]),a._v(". By default the removal of Tag has a fading animation. If you don't want to use it, you can set the "),l("code",[a._v("close-transition")]),a._v(" attribute, which accepts a "),l("code",[a._v("Boolean")]),a._v(", to "),l("code",[a._v("true")]),a._v(". "),l("code",[a._v("close")]),a._v(" event triggers when Tag is removed.")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tag")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-for")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"tag in tags"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":key")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"tag.name"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":closable")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"true"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":type")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"tag.type"')]),a._v("\n>")]),a._v("\n{{tag.name}}\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tag")]),a._v(">")]),a._v("\n\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),l("span",{attrs:{class:"javascript"}},[a._v("\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("export")]),a._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("default")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("data")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("tags")]),a._v(": [\n { "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tag 1'")]),a._v(", "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("''")]),a._v(" },\n { "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tag 2'")]),a._v(", "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'gray'")]),a._v(" },\n { "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tag 3'")]),a._v(", "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'primary'")]),a._v(" },\n { "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tag 4'")]),a._v(", "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'success'")]),a._v(" },\n { "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tag 5'")]),a._v(", "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'warning'")]),a._v(" },\n { "),l("span",{attrs:{class:"hljs-attr"}},[a._v("name")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tag 6'")]),a._v(", "),l("span",{attrs:{class:"hljs-attr"}},[a._v("type")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("'danger'")]),a._v(" }\n ]\n };\n }\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),a._v("\n")])])])]),a._m(3),a._m(4),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tag :key="tag" v-for="tag in dynamicTags" :closable="true" :close-transition="false" @close="handleClose(tag)">\n{{tag}}\n</el-tag>\n<el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="mini" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">\n</el-input>\n<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>\n\n',script:"\n export default {\n data: function() {\n return {\n dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],\n inputVisible: false,\n inputValue: ''\n };\n },\n methods: {\n handleClose: function(tag) {\n this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);\n },\n\n showInput: function() {\n this.inputVisible = true;\n this.$nextTick(function() {\n this.$refs.saveTagInput.$refs.input.focus();\n });\n },\n\n handleInputConfirm: function() {\n var inputValue = this.inputValue;\n if (inputValue) {\n this.dynamicTags.push(inputValue);\n }\n this.inputVisible = false;\n this.inputValue = '';\n }\n }\n }\n",style:null}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a._l(a.dynamicTags,function(t){return l("el-tag",{key:t,attrs:{closable:!0,"close-transition":!1},on:{close:function(s){a.handleClose(t)}}},[a._v("\n"+a._s(t)+"\n")])}),a.inputVisible?l("el-input",{ref:"saveTagInput",staticClass:"input-new-tag",attrs:{size:"mini"},on:{blur:a.handleInputConfirm},nativeOn:{keyup:function(s){return"button"in s||!a._k(s.keyCode,"enter",13,s.key,"Enter")?a.handleInputConfirm(s):null}},model:{value:a.inputValue,callback:function(s){a.inputValue=s},expression:"inputValue"}}):l("el-button",{staticClass:"button-new-tag",attrs:{size:"small"},on:{click:a.showInput}},[a._v("+ New Tag")])],2),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tag")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":key")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"tag"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-for")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"tag in dynamicTags"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":closable")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"true"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":close-transition")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"false"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("@close")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"handleClose(tag)"')]),a._v("\n>")]),a._v("\n{{tag}}\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-tag")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-input")]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("class")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"input-new-tag"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-if")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"inputVisible"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-model")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"inputValue"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("ref")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"saveTagInput"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("size")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"mini"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("@keyup.enter.native")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"handleInputConfirm"')]),a._v("\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("@blur")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"handleInputConfirm"')]),a._v("\n>")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-input")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-else")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("class")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"button-new-tag"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("size")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"small"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("@click")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"showInput"')]),a._v(">")]),a._v("+ New Tag"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("el-button")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),l("span",{attrs:{class:"javascript"}},[a._v("\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("export")]),a._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("default")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("data")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("dynamicTags")]),a._v(": ["),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tag 1'")]),a._v(", "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tag 2'")]),a._v(", "),l("span",{attrs:{class:"hljs-string"}},[a._v("'Tag 3'")]),a._v("],\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("inputVisible")]),a._v(": "),l("span",{attrs:{class:"hljs-literal"}},[a._v("false")]),a._v(",\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("inputValue")]),a._v(": "),l("span",{attrs:{class:"hljs-string"}},[a._v("''")]),a._v("\n };\n },\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("methods")]),a._v(": {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("handleClose")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}},[a._v("tag")]),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".dynamicTags.splice("),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".dynamicTags.indexOf(tag), "),l("span",{attrs:{class:"hljs-number"}},[a._v("1")]),a._v(");\n },\n\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("showInput")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".inputVisible = "),l("span",{attrs:{class:"hljs-literal"}},[a._v("true")]),a._v(";\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".$nextTick("),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".$refs.saveTagInput.$refs.input.focus();\n });\n },\n\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("handleInputConfirm")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("var")]),a._v(" inputValue = "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".inputValue;\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("if")]),a._v(" (inputValue) {\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".dynamicTags.push(inputValue);\n }\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".inputVisible = "),l("span",{attrs:{class:"hljs-literal"}},[a._v("false")]),a._v(";\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("this")]),a._v(".inputValue = "),l("span",{attrs:{class:"hljs-string"}},[a._v("''")]),a._v(";\n }\n }\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),a._v("\n")])])])]),a._m(5),a._m(6),a._m(7),a._m(8)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"tag"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#tag","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tag")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"basic-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"removable-tag"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#removable-tag","aria-hidden":"true"}},[this._v("¶")]),this._v(" Removable Tag")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"edit-dynamically"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#edit-dynamically","aria-hidden":"true"}},[this._v("¶")]),this._v(" Edit Dynamically")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[s._v("You can use the "),t("code",{pre:!0},[s._v("close")]),s._v(" event to add and remove tag dynamically.")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("type")]),t("td",[s._v("theme")]),t("td",[s._v("string")]),t("td",[s._v("primary/gray/success/warning/danger")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("closable")]),t("td",[s._v("whether Tab can be removed")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("close-transition")]),t("td",[s._v("whether to disable animations")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("hit")]),t("td",[s._v("whether Tag has a highlighted border")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("color")]),t("td",[s._v("background color of the tag")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"events"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Event Name")]),t("th",[s._v("Description")]),t("th",[s._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[s._v("close")]),t("td",[s._v("triggers when Tab is removed")]),t("td",[s._v("—")])])])])}],!1,null,null,null);t.default=a.exports},871:function(s,t,a){"use strict";a.r(t);var l={data:function(){return{value1:"",value2:new Date(2016,9,10,18,40),value3:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)],startTime:"",endTime:""}}},a=(a(756),a(0)),a=Object(a.a)(l,function(){var t=this,s=t.$createElement,s=t._self._c||s;return s("section",[t._m(0),s("p",[t._v("Use Time Picker for time input.")]),t._m(1),s("p",[t._v("Provide a list of fixed time for users to choose.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"<el-time-select v-model=\"value1\" :picker-options=\"{\n start: '08:30',\n step: '00:15',\n end: '18:30'\n }\" placeholder=\"Select time\">\n</el-time-select>\n\n\n",script:"\n export default {\n data: function() {\n return {\n value1: ''\n };\n }\n }\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-time-select",{attrs:{"picker-options":{start:"08:30",step:"00:15",end:"18:30"},placeholder:"Select time"},model:{value:t.value1,callback:function(s){t.value1=s},expression:"value1"}})],1),s("p",[t._v("Use "),s("code",[t._v("el-time-select")]),t._v(" label, then assign start time, end time and time step with "),s("code",[t._v("start")]),t._v(", "),s("code",[t._v("end")]),t._v(" and "),s("code",[t._v("step")]),t._v(".")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-time-select")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value1"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":picker-options")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v("\"{\n start: '08:30',\n step: '00:15',\n end: '18:30'\n }\"")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Select time"')]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-time-select")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value1")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v("\n };\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(2),s("p",[t._v("Can pick an arbitrary time.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-time-picker v-model="value2" :picker-options="{\n selectableRange: \'18:30:00 - 20:30:00\'\n }" placeholder="Arbitrary time">\n </el-time-picker>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n return {\n value2: new Date(2016, 9, 10, 18, 40)\n };\n }\n }\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[s("el-time-picker",{attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Arbitrary time"},model:{value:t.value2,callback:function(s){t.value2=s},expression:"value2"}})]],2),s("p",[t._v("Use "),s("code",[t._v("el-time-picker")]),t._v(" label, and you can limit the time range by using "),s("code",[t._v("selectableRange")]),t._v(".")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-time-picker")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value2"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":picker-options")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v("\"{\n selectableRange: '18:30:00 - 20:30:00'\n }\"")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Arbitrary time"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-time-picker")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value2")]),t._v(": "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("new")]),t._v(" "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("Date")]),t._v("("),s("span",{attrs:{class:"hljs-number"}},[t._v("2016")]),t._v(", "),s("span",{attrs:{class:"hljs-number"}},[t._v("9")]),t._v(", "),s("span",{attrs:{class:"hljs-number"}},[t._v("10")]),t._v(", "),s("span",{attrs:{class:"hljs-number"}},[t._v("18")]),t._v(", "),s("span",{attrs:{class:"hljs-number"}},[t._v("40")]),t._v(")\n };\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(3),s("p",[t._v("If start time is picked at first, then the end time will change accordingly.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"<template>\n <el-time-select placeholder=\"Start time\" v-model=\"startTime\" :picker-options=\"{\n start: '08:30',\n step: '00:15',\n end: '18:30'\n }\">\n </el-time-select>\n <el-time-select placeholder=\"End time\" v-model=\"endTime\" :picker-options=\"{\n start: '08:30',\n step: '00:15',\n end: '18:30',\n minTime: startTime\n }\">\n </el-time-select>\n</template>\n\n\n",script:"\n export default {\n data: function() {\n return {\n startTime: '',\n endTime: ''\n };\n }\n }\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[s("el-time-select",{attrs:{placeholder:"Start time","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},model:{value:t.startTime,callback:function(s){t.startTime=s},expression:"startTime"}}),s("el-time-select",{attrs:{placeholder:"End time","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:t.startTime}},model:{value:t.endTime,callback:function(s){t.endTime=s},expression:"endTime"}})]],2),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-time-select")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Start time"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"startTime"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":picker-options")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v("\"{\n start: '08:30',\n step: '00:15',\n end: '18:30'\n }\"")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-time-select")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-time-select")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"End time"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"endTime"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":picker-options")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v("\"{\n start: '08:30',\n step: '00:15',\n end: '18:30',\n minTime: startTime\n }\"")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-time-select")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("startTime")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("endTime")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v("\n };\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(4),s("p",[t._v("Can pick an arbitrary time range.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-time-picker is-range v-model="value3" placeholder="Pick a time range">\n </el-time-picker>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n return {\n value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n };\n }\n }\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[s("el-time-picker",{attrs:{"is-range":"",placeholder:"Pick a time range"},model:{value:t.value3,callback:function(s){t.value3=s},expression:"value3"}})]],2),s("p",[t._v("We can pick a time range by adding an "),s("code",[t._v("is-range")]),t._v(" attribute.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-time-picker")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("is-range")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value3"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Pick a time range"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-time-picker")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value3")]),t._v(": ["),s("span",{attrs:{class:"hljs-keyword"}},[t._v("new")]),t._v(" "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("Date")]),t._v("("),s("span",{attrs:{class:"hljs-number"}},[t._v("2016")]),t._v(", "),s("span",{attrs:{class:"hljs-number"}},[t._v("9")]),t._v(", "),s("span",{attrs:{class:"hljs-number"}},[t._v("10")]),t._v(", "),s("span",{attrs:{class:"hljs-number"}},[t._v("8")]),t._v(", "),s("span",{attrs:{class:"hljs-number"}},[t._v("40")]),t._v("), "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("new")]),t._v(" "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("Date")]),t._v("("),s("span",{attrs:{class:"hljs-number"}},[t._v("2016")]),t._v(", "),s("span",{attrs:{class:"hljs-number"}},[t._v("9")]),t._v(", "),s("span",{attrs:{class:"hljs-number"}},[t._v("10")]),t._v(", "),s("span",{attrs:{class:"hljs-number"}},[t._v("9")]),t._v(", "),s("span",{attrs:{class:"hljs-number"}},[t._v("40")]),t._v(")]\n };\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(5),t._m(6),t._m(7),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"timepicker"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#timepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" TimePicker")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"fixed-time-picker"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#fixed-time-picker","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fixed time picker")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"arbitrary-time-picker"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#arbitrary-time-picker","aria-hidden":"true"}},[this._v("¶")]),this._v(" Arbitrary time picker")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"fixed-time-range"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#fixed-time-range","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fixed time range")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"arbitrary-time-range"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#arbitrary-time-range","aria-hidden":"true"}},[this._v("¶")]),this._v(" Arbitrary time range")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("readonly")]),t("td",[s._v("whether DatePicker is read only")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("whether DatePicker is disabled")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("editable")]),t("td",[s._v("whether the input is editable")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("clearable")]),t("td",[s._v("Whether to show clear button")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("size of Input")]),t("td",[s._v("string")]),t("td",[s._v("large/small/mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("placeholder")]),t("td",[s._v("placeholder")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("value")]),t("td",[s._v("value of the picker")]),t("td",[s._v("date for Time Picker, and string for Time Select")]),t("td",[s._v("hour "),t("code",{pre:!0},[s._v("HH")]),s._v(", minute "),t("code",{pre:!0},[s._v("mm")]),s._v(", second "),t("code",{pre:!0},[s._v("ss")])]),t("td",[s._v("HH:mm:ss")])]),t("tr",[t("td",[s._v("align")]),t("td",[s._v("alignment")]),t("td",[s._v("left/center/right")]),t("td",[s._v("left")]),t("td")]),t("tr",[t("td",[s._v("popper-class")]),t("td",[s._v("custom class name for TimePicker's dropdown")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("picker-options")]),t("td",[s._v("additional options, check the table below")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("{}")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"time-select-options"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#time-select-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Time Select Options")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("start")]),t("td",[s._v("start time")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("09:00")])]),t("tr",[t("td",[s._v("end")]),t("td",[s._v("end time")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("18:00")])]),t("tr",[t("td",[s._v("step")]),t("td",[s._v("time step")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("00:30")])]),t("tr",[t("td",[s._v("minTime")]),t("td",[s._v("minimum time, any time before this time will be disabled")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("00:00")])]),t("tr",[t("td",[s._v("maxTime")]),t("td",[s._v("maximum time, any time after this time will be disabled")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"time-picker-options"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#time-picker-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Time Picker Options")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("selectableRange")]),t("td",[s._v("available time range, e.g."),t("code",{pre:!0},[s._v("'18:30:00 - 20:30:00'")]),s._v("or"),t("code",{pre:!0},[s._v("['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']")])]),t("td",[s._v("string/array")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("format")]),t("td",[s._v("format of the picker")]),t("td",[s._v("string")]),t("td",[s._v("hour "),t("code",{pre:!0},[s._v("HH")]),s._v(", minute "),t("code",{pre:!0},[s._v("mm")]),s._v(", second "),t("code",{pre:!0},[s._v("ss")])]),t("td",[s._v("HH:mm:ss")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"events"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Event Name")]),t("th",[s._v("Description")]),t("th",[s._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("triggers when input value changes")]),t("td",[s._v("formatted value")])])])])}],!1,null,null,null);t.default=a.exports},872:function(s,t,a){"use strict";a.r(t);var l={data:function(){return{timelineItems:[{date:"2018-10-10",title:"1.1.1",description:"<ul>\n <li>组件工程规范化调整\n <ul>\n <li>组件import别名调整为yuwp-ui</li>\n <li>全局变量别名由调整,避免和其它版本冲突</li>\n </ul>\n </li>\n <li>组件文档版本切换修复</li>\n </ul>"},{date:"2018-09-29",title:"1.1.0",description:"<ul>\n <li>业务组件统一命名为x系列,如:xtable、xform、xselect等等\n <ul>\n <li>XDialog <- DialogX 对话框</li>\n <li>Xtree <- TreeX 封装树</li>\n <li>Xselect <- SelectX 封装下拉框</li>\n <li>Xradio <- RadioX 封装单选框</li>\n <li>Xcheckbox <- CheckboxX 封装复选框</li>\n <li>Xcascader <- CascaderX 封装级联选择器</li>\n <li>XtableX <- TableX 封装表格,不推荐使用,推荐使用Xtable</li>\n <li>XformQ <- FormQ 表单查询,不推荐使用,推荐使用Xform</li>\n <li>XformX <- FormX 封装表单,不推荐使用,推荐使用Xform</li>\n </ul></li>\n <li>组件更改统一命名为yu-前缀,同时兼容老版本el-前缀</li> \n </ul>"},{date:"2018-09-15",title:"1.1.0",description:" <ul>\n <li>新增Xtable组件。</li>\n <li>新增Xform组件</li>\n <li>新增Echarts组件,自动销毁</li>\n <li>Tree/TreeX\n <ul>\n <li>新增allow-drag属性</li>\n <li>新增node-dbclick事件</li>\n <li>新增node-dbclick事件,提供双击事件</li>\n </ul> </li>\n </ul>"}]}}},a=a(0),a=Object(a.a)(l,function(){var a=this,s=a.$createElement,l=a._self._c||s;return l("section",[a._m(0),l("p",[a._v("It is generally used to display events with time as the main line, such as the common corporate development history of enterprise websites")]),a._m(1),l("p",[a._v("The timeline defaults to vertical")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:' <yu-timeline>\n <yu-timeline-item title="标题1" description="这是一段很长很长很长的描述性文字" date="2018-10-10"></yu-timeline-item>\n <yu-timeline-item title="标题2" description="这是一段很长很长很长的描述性文字" date="2018-09-29"></yu-timeline-item>\n <yu-timeline-item title="标题3" description="这是一段很长很长很长的描述性文字" date="2018-09-15"></yu-timeline-item>\n </yu-timeline>\n',script:null,style:null}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[l("yu-timeline",[l("yu-timeline-item",{attrs:{title:"标题1",description:"这是一段很长很长很长的描述性文字",date:"2018-10-10"}}),l("yu-timeline-item",{attrs:{title:"标题2",description:"这是一段很长很长很长的描述性文字",date:"2018-09-29"}}),l("yu-timeline-item",{attrs:{title:"标题3",description:"这是一段很长很长很长的描述性文字",date:"2018-09-15"}})],1)],1),l("p",[a._v("You can set the icon, title, date, and description with detailed descriptions of the icon, title, time, and description, and can also be assigned by slot.")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[a._v(" "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("yu-timeline")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("yu-timeline-item")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("title")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"标题1"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("description")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"这是一段很长很长很长的描述性文字"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"2018-10-10"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("yu-timeline-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("yu-timeline-item")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("title")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"标题2"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("description")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"这是一段很长很长很长的描述性文字"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"2018-09-29"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("yu-timeline-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("yu-timeline-item")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("title")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"标题3"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("description")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"这是一段很长很长很长的描述性文字"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"2018-09-15"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("yu-timeline-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("yu-timeline")]),a._v(">")]),a._v("\n")])])])]),a._m(2),l("p",[a._v("horizontal timeline is generally suitable for events with less text, such as shopping state, etc. If there are more events, please consider vertical event line")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<yu-timeline direction="horizontal" space="200px">\n <yu-timeline-item title="标题1" description="这是一段描述性文字" date="2017-09-11"></yu-timeline-item>\n <yu-timeline-item title="标题2" description="这是一段描述性文字" date="2018-04-28"></yu-timeline-item>\n <yu-timeline-item title="标题3" description="这是一段描述性文字" date="2018-03-08"></yu-timeline-item>\n </yu-timeline>\n',script:null,style:null}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[l("yu-timeline",{attrs:{direction:"horizontal",space:"200px"}},[l("yu-timeline-item",{attrs:{title:"标题1",description:"这是一段描述性文字",date:"2017-09-11"}}),l("yu-timeline-item",{attrs:{title:"标题2",description:"这是一段描述性文字",date:"2018-04-28"}}),l("yu-timeline-item",{attrs:{title:"标题3",description:"这是一段描述性文字",date:"2018-03-08"}})],1)],1),l("p",[a._v("You only need to set the "),l("code",[a._v("direction")]),a._v(" attribute to"),l("code",[a._v("vertical")]),a._v(" in the "),l("code",[a._v("yu-timeline")]),a._v(" element.You can set "),l("code",[a._v("space")]),a._v(" attribute when the width of the step needs to be fixed which accepts "),l("code",[a._v("String")]),a._v("or "),l("code",[a._v("Number")]),a._v(" type. The unit of the "),l("code",[a._v("space")]),a._v(" attribute is "),l("code",[a._v("px")]),a._v(". If not set, it is responsive.")]),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("yu-timeline")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("direction")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"horizontal"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("space")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"200px"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("yu-timeline-item")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("title")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"标题1"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("description")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"这是一段描述性文字"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"2017-09-11"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("yu-timeline-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("yu-timeline-item")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("title")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"标题2"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("description")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"这是一段描述性文字"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"2018-04-28"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("yu-timeline-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("yu-timeline-item")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("title")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"标题3"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("description")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"这是一段描述性文字"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("date")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"2018-03-08"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("yu-timeline-item")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("yu-timeline")]),a._v(">")]),a._v("\n")])])])]),a._m(3),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:' <yu-timeline>\n <yu-timeline-item v-for="(item, index) in timelineItems" :key="index" :timeline-items="timelineItems">\n <div slot="title">{{item.title}}</div>\n <div slot="date">{{item.date}}</div>\n <div slot="description" v-html="item.description"></div>\n </yu-timeline-item>\n</yu-timeline>\n\n\n',script:"\n export default {\n data: function() {\n return {\n timelineItems:[]\n }\n }\n }\n",style:null}}},[l("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[l("yu-timeline",a._l(a.timelineItems,function(s,t){return l("yu-timeline-item",{key:t,attrs:{"timeline-items":a.timelineItems}},[l("div",{attrs:{slot:"title"},slot:"title"},[a._v(a._s(s.title))]),l("div",{attrs:{slot:"date"},slot:"date"},[a._v(a._s(s.date))]),l("div",{attrs:{slot:"description"},domProps:{innerHTML:a._s(s.description)},slot:"description"})])}))],1),l("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[l("pre",{pre:!0},[l("code",{attrs:{class:"hljs language-html"}},[a._v(" "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("yu-timeline")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("yu-timeline-item")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-for")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"(item, index) in timelineItems"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":key")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"index"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v(":timeline-items")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"timelineItems"')]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("div")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("slot")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"title"')]),a._v(">")]),a._v("{{item.title}}"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("div")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("div")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("slot")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"date"')]),a._v(">")]),a._v("{{item.date}}"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("div")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("div")]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("slot")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"description"')]),a._v(" "),l("span",{attrs:{class:"hljs-attr"}},[a._v("v-html")]),a._v("="),l("span",{attrs:{class:"hljs-string"}},[a._v('"item.description"')]),a._v(">")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("div")]),a._v(">")]),a._v("\n "),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("yu-timeline-item")]),a._v(">")]),a._v("\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("yu-timeline")]),a._v(">")]),a._v("\n\n"),l("span",{attrs:{class:"hljs-tag"}},[a._v("<"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),l("span",{attrs:{class:"javascript"}},[a._v("\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("export")]),a._v(" "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("default")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("data")]),a._v(": "),l("span",{attrs:{class:"hljs-function"}},[l("span",{attrs:{class:"hljs-keyword"}},[a._v("function")]),a._v("("),l("span",{attrs:{class:"hljs-params"}}),a._v(") ")]),a._v("{\n "),l("span",{attrs:{class:"hljs-keyword"}},[a._v("return")]),a._v(" {\n "),l("span",{attrs:{class:"hljs-attr"}},[a._v("timelineItems")]),a._v(":[]\n }\n }\n }\n")]),l("span",{attrs:{class:"hljs-tag"}},[a._v("</"),l("span",{attrs:{class:"hljs-name"}},[a._v("script")]),a._v(">")]),a._v("\n")])])])]),a._m(4),a._m(5),a._m(6),a._m(7),a._m(8),a._m(9)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"timeline"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#timeline","aria-hidden":"true"}},[this._v("¶")]),this._v(" timeline")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"basic-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"horizontal-timeline"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#horizontal-timeline","aria-hidden":"true"}},[this._v("¶")]),this._v(" Horizontal timeline")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"slot-demo"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#slot-demo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot demo")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"timeline-attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#timeline-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" timeline Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("space")]),t("td",[s._v("the spacing of each step, will be responsive if omitted. Support percentage.")]),t("td",[s._v("Number,String")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("direction")]),t("td",[s._v("display direction")]),t("td",[s._v("string")]),t("td",[s._v("vertical/horizontal")]),t("td",[s._v("horizontal")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"timelineitem-attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#timelineitem-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" timelineItem Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("title")]),t("td",[s._v("timeline title")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("date")]),t("td",[s._v("timeline date")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("description")]),t("td",[s._v("timeline description")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"timelineitem-slot"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#timelineitem-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" timelineItem Slot")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("name")]),t("th",[s._v("Description")])])]),t("tbody",[t("tr",[t("td",[s._v("title")]),t("td",[s._v("timeline title")])]),t("tr",[t("td",[s._v("date")]),t("td",[s._v("timeline date")])]),t("tr",[t("td",[s._v("description")]),t("td",[s._v("timeline description")])])])])}],!1,null,null,null);t.default=a.exports},873:function(s,t,a){"use strict";a.r(t);var l={data:function(){return{disabled:!1}}},a=(a(757),a(0)),a=Object(a.a)(l,function(){var t=this,s=t.$createElement,s=t._self._c||s;return s("section",[t._m(0),s("p",[t._v("Display prompt information for mouse hover.")]),t._m(1),s("p",[t._v("Tooltip has 9 placements.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="box">\n <div class="top">\n <el-tooltip class="item" effect="dark" content="Top Left prompts info" placement="top-start">\n <el-button>top-start</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Top Center prompts info" placement="top">\n <el-button>top</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Top Right prompts info" placement="top-end">\n <el-button>top-end</el-button>\n </el-tooltip>\n </div>\n <div class="left">\n <el-tooltip class="item" effect="dark" content="Left Top prompts info" placement="left-start">\n <el-button>left-start</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Left Center prompts info" placement="left">\n <el-button>left</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Left Bottom prompts info" placement="left-end">\n <el-button>left-end</el-button>\n </el-tooltip>\n </div>\n\n <div class="right">\n <el-tooltip class="item" effect="dark" content="Right Top prompts info" placement="right-start">\n <el-button>right-start</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Right Center prompts info" placement="right">\n <el-button>right</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Right Bottom prompts info" placement="right-end">\n <el-button>right-end</el-button>\n </el-tooltip>\n </div>\n <div class="bottom">\n <el-tooltip class="item" effect="dark" content="Bottom Left prompts info" placement="bottom-start">\n <el-button>bottom-start</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Bottom Center prompts info" placement="bottom">\n <el-button>bottom</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Bottom Right prompts info" placement="bottom-end">\n <el-button>bottom-end</el-button>\n </el-tooltip>\n </div>\n</div>\n\n\n',script:null,style:"\n .box {\n width: 400px;\n\n .top {\n text-align: center;\n }\n\n .left {\n float: left;\n width: 110px;\n }\n\n .right {\n float: right;\n width: 110px;\n }\n\n .bottom {\n clear: both;\n text-align: center;\n }\n\n .item {\n margin: 4px;\n }\n\n .left .el-tooltip__popper,\n .right .el-tooltip__popper {\n padding: 8px 10px;\n }\n\n .el-button {\n width: 110px;\n }\n }\n"}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("div",{staticClass:"box"},[s("div",{staticClass:"top"},[s("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Left prompts info",placement:"top-start"}},[s("el-button",[t._v("top-start")])],1),s("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Center prompts info",placement:"top"}},[s("el-button",[t._v("top")])],1),s("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Right prompts info",placement:"top-end"}},[s("el-button",[t._v("top-end")])],1)],1),s("div",{staticClass:"left"},[s("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Top prompts info",placement:"left-start"}},[s("el-button",[t._v("left-start")])],1),s("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Center prompts info",placement:"left"}},[s("el-button",[t._v("left")])],1),s("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Bottom prompts info",placement:"left-end"}},[s("el-button",[t._v("left-end")])],1)],1),s("div",{staticClass:"right"},[s("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Top prompts info",placement:"right-start"}},[s("el-button",[t._v("right-start")])],1),s("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Center prompts info",placement:"right"}},[s("el-button",[t._v("right")])],1),s("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Bottom prompts info",placement:"right-end"}},[s("el-button",[t._v("right-end")])],1)],1),s("div",{staticClass:"bottom"},[s("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Left prompts info",placement:"bottom-start"}},[s("el-button",[t._v("bottom-start")])],1),s("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Center prompts info",placement:"bottom"}},[s("el-button",[t._v("bottom")])],1),s("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Right prompts info",placement:"bottom-end"}},[s("el-button",[t._v("bottom-end")])],1)],1)])]),s("p",[t._v("Use attribute "),s("code",[t._v("content")]),t._v(" to set the display content when hover. The attribute "),s("code",[t._v("placement")]),t._v(" determines the position of the tooltip. Its value is "),s("code",[t._v("[orientation]-[alignment]")]),t._v(" with four orientations "),s("code",[t._v("top")]),t._v(", "),s("code",[t._v("left")]),t._v(", "),s("code",[t._v("right")]),t._v(", "),s("code",[t._v("bottom")]),t._v(" and three alignments "),s("code",[t._v("start")]),t._v(", "),s("code",[t._v("end")]),t._v(", "),s("code",[t._v("null")]),t._v(", and the default alignment is null. Take "),s("code",[t._v('placement="left-end"')]),t._v(" for example, Tooltip will display on the left of the element which you are hovering and the bottom of the tooltip aligns with the bottom of the element.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"box"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"top"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tooltip")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"item"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("effect")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"dark"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("content")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Top Left prompts info"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placement")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"top-start"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("top-start"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tooltip")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tooltip")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"item"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("effect")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"dark"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("content")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Top Center prompts info"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placement")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"top"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("top"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tooltip")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tooltip")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"item"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("effect")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"dark"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("content")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Top Right prompts info"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placement")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"top-end"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("top-end"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tooltip")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"left"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tooltip")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"item"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("effect")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"dark"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("content")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Left Top prompts info"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placement")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"left-start"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("left-start"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tooltip")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tooltip")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"item"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("effect")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"dark"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("content")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Left Center prompts info"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placement")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"left"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("left"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tooltip")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tooltip")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"item"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("effect")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"dark"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("content")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Left Bottom prompts info"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placement")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"left-end"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("left-end"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tooltip")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"right"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tooltip")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"item"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("effect")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"dark"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("content")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Right Top prompts info"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placement")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"right-start"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("right-start"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tooltip")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tooltip")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"item"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("effect")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"dark"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("content")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Right Center prompts info"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placement")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"right"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("right"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tooltip")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tooltip")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"item"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("effect")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"dark"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("content")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Right Bottom prompts info"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placement")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"right-end"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("right-end"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tooltip")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"bottom"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tooltip")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"item"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("effect")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"dark"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("content")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Bottom Left prompts info"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placement")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"bottom-start"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("bottom-start"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tooltip")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tooltip")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"item"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("effect")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"dark"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("content")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Bottom Center prompts info"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placement")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"bottom"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("bottom"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tooltip")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tooltip")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"item"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("effect")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"dark"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("content")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Bottom Right prompts info"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placement")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"bottom-end"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("bottom-end"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tooltip")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("style")]),t._v(">")]),t._v("\n .box {\n width: 400px;\n\n .top {\n text-align: center;\n }\n\n .left {\n float: left;\n width: 110px;\n }\n\n .right {\n float: right;\n width: 110px;\n }\n\n .bottom {\n clear: both;\n text-align: center;\n }\n\n .item {\n margin: 4px;\n }\n\n .left .el-tooltip__popper,\n .right .el-tooltip__popper {\n padding: 8px 10px;\n }\n\n .el-button {\n width: 110px;\n }\n }\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("style")]),t._v(">")]),t._v("\n")])])])]),t._m(2),t._m(3),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tooltip content="Top center" placement="top">\n <el-button>Dark</el-button>\n</el-tooltip>\n<el-tooltip content="Bottom center" placement="bottom" effect="light">\n <el-button>Light</el-button>\n</el-tooltip>\n',script:null,style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-tooltip",{attrs:{content:"Top center",placement:"top"}},[s("el-button",[t._v("Dark")])],1),s("el-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[s("el-button",[t._v("Light")])],1)],1),s("p",[t._v("Set "),s("code",[t._v("effect")]),t._v(" to modify theme, and the default value is "),s("code",[t._v("dark")]),t._v(".")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tooltip")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("content")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Top center"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placement")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"top"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("Dark"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tooltip")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tooltip")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("content")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Bottom center"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placement")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"bottom"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("effect")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"light"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("Light"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tooltip")]),t._v(">")]),t._v("\n")])])])]),t._m(4),s("p",[t._v("Display multiple lines of text and set their format.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tooltip placement="top">\n <div slot="content">multiple lines<br>second line</div>\n <el-button>Top center</el-button>\n</el-tooltip>\n',script:null,style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-tooltip",{attrs:{placement:"top"}},[s("div",{attrs:{slot:"content"},slot:"content"},[t._v("multiple lines"),s("br"),t._v("second line")]),s("el-button",[t._v("Top center")])],1)],1),s("p",[t._v("Override attribute "),s("code",[t._v("content")]),t._v(" of "),s("code",[t._v("el-tooltip")]),t._v(" by adding a slot named "),s("code",[t._v("content")]),t._v(".")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tooltip")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placement")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"top"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("slot")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"content"')]),t._v(">")]),t._v("multiple lines"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("br")]),t._v("/>")]),t._v("second line"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("Top center"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tooltip")]),t._v(">")]),t._v("\n")])])])]),t._m(5),s("p",[t._v("In addition to basic usages, there are some attributes that allow you to customize your own:")]),t._m(6),t._m(7),t._m(8),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-tooltip :disabled="disabled" content="click to close tooltip function" placement="bottom" effect="light">\n <el-button @click="disabled = !disabled">click to {{disabled ? \'active\' : \'close\'}} tooltip function</el-button>\n </el-tooltip>\n</template>\n\n\n',script:null,style:"\n .slide-fade-enter-active {\n transition: all .3s ease;\n }\n .slide-fade-leave-active {\n transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);\n }\n .slide-fade-enter, .expand-fade-leave-active {\n margin-left: 20px;\n opacity: 0;\n }\n"}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[s("el-tooltip",{attrs:{disabled:t.disabled,content:"click to close tooltip function",placement:"bottom",effect:"light"}},[s("el-button",{on:{click:function(s){t.disabled=!t.disabled}}},[t._v("click to "+t._s(t.disabled?"active":"close")+" tooltip function")])],1)]],2),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tooltip")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":disabled")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"disabled"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("content")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"click to close tooltip function"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placement")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"bottom"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("effect")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"light"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@click")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"disabled = !disabled"')]),t._v(">")]),t._v("click to {{disabled ? 'active' : 'close'}} tooltip function"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tooltip")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("style")]),t._v(">")]),s("span",{attrs:{class:"css"}},[t._v("\n "),s("span",{attrs:{class:"hljs-selector-class"}},[t._v(".slide-fade-enter-active")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("transition")]),t._v(": all ."),s("span",{attrs:{class:"hljs-number"}},[t._v("3s")]),t._v(" ease;\n }\n "),s("span",{attrs:{class:"hljs-selector-class"}},[t._v(".slide-fade-leave-active")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("transition")]),t._v(": all ."),s("span",{attrs:{class:"hljs-number"}},[t._v("3s")]),t._v(" "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("cubic-bezier")]),t._v("("),s("span",{attrs:{class:"hljs-number"}},[t._v("1.0")]),t._v(", "),s("span",{attrs:{class:"hljs-number"}},[t._v("0.5")]),t._v(", "),s("span",{attrs:{class:"hljs-number"}},[t._v("0.8")]),t._v(", "),s("span",{attrs:{class:"hljs-number"}},[t._v("1.0")]),t._v(");\n }\n "),s("span",{attrs:{class:"hljs-selector-class"}},[t._v(".slide-fade-enter")]),t._v(", "),s("span",{attrs:{class:"hljs-selector-class"}},[t._v(".expand-fade-leave-active")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("margin-left")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("20px")]),t._v(";\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("opacity")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("0")]),t._v(";\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("style")]),t._v(">")]),t._v("\n")])])])]),t._m(9),t._m(10),t._m(11)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"tooltip"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#tooltip","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tooltip")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"basic-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"theme"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#theme","aria-hidden":"true"}},[this._v("¶")]),this._v(" Theme")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[s._v("Tooltip has two themes: "),t("code",{pre:!0},[s._v("dark")]),s._v(" and "),t("code",{pre:!0},[s._v("light")]),s._v("。")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"more-content"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#more-content","aria-hidden":"true"}},[this._v("¶")]),this._v(" More Content")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"advanced-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#advanced-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Advanced usage")])},function(){var s=this.$createElement,s=this._self._c||s;return s("p",[s("code",{pre:!0},[this._v("transition")]),this._v(" attribute allows you to customize the animation in which the tooltip shows or hides, and the default value is el-fade-in-linear.")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[t("code",{pre:!0},[s._v("disabled")]),s._v(" attribute allows you to disable "),t("code",{pre:!0},[s._v("tooltip")]),s._v(". You just need set it to "),t("code",{pre:!0},[s._v("true")]),s._v(".")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[s._v("In fact, Tooltip is an extension based on "),t("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")]),s._v(", you can use any attribute that are allowed in Vue-popper.")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("div",{staticClass:"tip"},[t("p",[s._v("The "),t("code",{pre:!0},[s._v("router-link")]),s._v(" component is not supported in tooltip, please use "),t("code",{pre:!0},[s._v("vm.$router.push")]),s._v(".")]),t("p",[s._v("Disabled form elements are not supported in tooltip, see more information at "),t("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter"}},[s._v("MDN")]),s._v(", please wrap disabled form elements.")])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("effect")]),t("td",[s._v("Tooltip theme")]),t("td",[s._v("string")]),t("td",[s._v("dark/light")]),t("td",[s._v("dark")])]),t("tr",[t("td",[s._v("content")]),t("td",[s._v("display content, can be overridden by "),t("code",{pre:!0},[s._v("slot#content")])]),t("td",[s._v("String")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("placement")]),t("td",[s._v("position of Tooltip")]),t("td",[s._v("string")]),t("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),t("td",[s._v("bottom")])]),t("tr",[t("td",[s._v("value(v-model)")]),t("td",[s._v("visibility of Tooltip")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("whether Tooltip is disabled")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("offset")]),t("td",[s._v("offset of the Tooltip")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("transition")]),t("td",[s._v("animation name")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("el-fade-in-linear")])]),t("tr",[t("td",[s._v("visible-arrow")]),t("td",[s._v("whether an arrow is displayed. For more information, check "),t("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")]),s._v(" page")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("popper-options")]),t("td",[t("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")]),s._v(" parameters")]),t("td",[s._v("Object")]),t("td",[s._v("refer to "),t("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")]),s._v(" doc")]),t("td",[t("code",{pre:!0},[s._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),t("tr",[t("td",[s._v("open-delay")]),t("td",[s._v("delay of appearance, in millisecond")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("manual")]),t("td",[s._v("whether to control Tooltip manually. "),t("code",{pre:!0},[s._v("mouseenter")]),s._v(" and "),t("code",{pre:!0},[s._v("mouseleave")]),s._v(" won't have effects if set to "),t("code",{pre:!0},[s._v("true")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("popper-class")]),t("td",[s._v("custom class name for Tooltip's popper")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("enterable")]),t("td",[s._v("whether the mouse can enter the tooltip")]),t("td",[s._v("Boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("hide-after")]),t("td",[s._v("timeout in milliseconds to hide tooltip")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])])])])}],!1,null,null,null);t.default=a.exports},874:function(s,t,a){"use strict";a.r(t);var l={data:function(){var a,l;return{data:function(){for(var s=[],t=1;t<=15;t++)s.push({key:t,label:"Option"+t,disabled:t%4==0});return s}(),data2:(a=[],l=["CA","IL","MD","TX","FL","CO","CT"],["California","Illinois","Maryland","Texas","Florida","Colorado","Connecticut "].forEach(function(s,t){a.push({label:s,key:t,initial:l[t]})}),a),data3:function(){for(var s=[],t=1;t<=15;t++)s.push({value:t,desc:"Option"+t,disabled:t%4==0});return s}(),value1:[1,4],value2:[],value3:[1],value4:[],filterMethod:function(s,t){return-1<t.initial.toLowerCase().indexOf(s.toLowerCase())},renderFunc:function(s,t){return s("span",[t.key," - ",t.label])}}},methods:{handleChange:function(s,t,a){console.log(s,t,a)}}},a=(a(758),a(0)),a=Object(a.a)(l,function(){var t=this,s=t.$createElement,s=t._self._c||s;return s("section",[t._m(0),t._m(1),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-transfer v-model="value1" :data="data">\n </el-transfer>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n var generateData = function() {\n var data = [];\n for (var i = 1; i <= 15; i++) {\n data.push({\n key: i,\n label: 'Option' + i,\n disabled: i % 4 === 0\n });\n }\n return data;\n };\n return {\n data: generateData(),\n value1: [1, 4]\n };\n }\n };\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[s("el-transfer",{attrs:{data:t.data},model:{value:t.value1,callback:function(s){t.value1=s},expression:"value1"}})]],2),s("p",[t._v("Data is passed to Transfer via the "),s("code",[t._v("data")]),t._v(" attribute. The data needs to be an object array, and each object should have these attributes: "),s("code",[t._v("key")]),t._v(" being the identification of the data item, "),s("code",[t._v("label")]),t._v(" being the displayed text, and "),s("code",[t._v("disabled")]),t._v(" indicating if the data item is disabled. Items inside the target list are in sync with the variable binding to "),s("code",[t._v("v-model")]),t._v(", and the value of that variable is an array of target item keys. So, if you don't want the target list be initially empty, you can initialize the "),s("code",[t._v("v-model")]),t._v(" with an array.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-transfer")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value1"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":data")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"data"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-transfer")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" generateData = "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" data = [];\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("for")]),t._v(" ("),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" i = "),s("span",{attrs:{class:"hljs-number"}},[t._v("1")]),t._v("; i <= "),s("span",{attrs:{class:"hljs-number"}},[t._v("15")]),t._v("; i++) {\n data.push({\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("key")]),t._v(": i,\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Option'")]),t._v(" + i,\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("disabled")]),t._v(": i % "),s("span",{attrs:{class:"hljs-number"}},[t._v("4")]),t._v(" === "),s("span",{attrs:{class:"hljs-number"}},[t._v("0")]),t._v("\n });\n }\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" data;\n };\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": generateData(),\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value1")]),t._v(": ["),s("span",{attrs:{class:"hljs-number"}},[t._v("1")]),t._v(", "),s("span",{attrs:{class:"hljs-number"}},[t._v("4")]),t._v("]\n };\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(2),s("p",[t._v("You can search and filter data items.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-transfer filterable :filter-method="filterMethod" filter-placeholder="State Abbreviations" v-model="value2" :data="data2">\n </el-transfer>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n var generateData2 = function() {\n var data = [];\n var states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];\n var initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];\n states.forEach(function(city, index) {\n data.push({\n label: city,\n key: index,\n initial: initials[index]\n });\n });\n return data;\n };\n return {\n data2: generateData2(),\n value2: [],\n filterMethod(query, item) {\n return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;\n }\n };\n }\n };\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[s("el-transfer",{attrs:{filterable:"","filter-method":t.filterMethod,"filter-placeholder":"State Abbreviations",data:t.data2},model:{value:t.value2,callback:function(s){t.value2=s},expression:"value2"}})]],2),s("p",[t._v("Set the "),s("code",[t._v("filterable")]),t._v(" attribute to "),s("code",[t._v("true")]),t._v(" to enable filter mode. By default, if the data item "),s("code",[t._v("label")]),t._v(" contains the search keyword, it will be included in the search result. Also, you can implement you own filter method with the "),s("code",[t._v("filter-method")]),t._v(" attribute. It takes a method and passes search keyword and each data item to it whenever the keyword changes. For a certain data item, if the method returns true, it will be included in the result list.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-transfer")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("filterable")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":filter-method")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"filterMethod"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("filter-placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"State Abbreviations"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value2"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":data")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"data2"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-transfer")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" generateData2 = "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" data = [];\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" states = ["),s("span",{attrs:{class:"hljs-string"}},[t._v("'California'")]),t._v(", "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Illinois'")]),t._v(", "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Maryland'")]),t._v(", "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Texas'")]),t._v(", "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Florida'")]),t._v(", "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Colorado'")]),t._v(", "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Connecticut '")]),t._v("];\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" initials = ["),s("span",{attrs:{class:"hljs-string"}},[t._v("'CA'")]),t._v(", "),s("span",{attrs:{class:"hljs-string"}},[t._v("'IL'")]),t._v(", "),s("span",{attrs:{class:"hljs-string"}},[t._v("'MD'")]),t._v(", "),s("span",{attrs:{class:"hljs-string"}},[t._v("'TX'")]),t._v(", "),s("span",{attrs:{class:"hljs-string"}},[t._v("'FL'")]),t._v(", "),s("span",{attrs:{class:"hljs-string"}},[t._v("'CO'")]),t._v(", "),s("span",{attrs:{class:"hljs-string"}},[t._v("'CT'")]),t._v("];\n states.forEach("),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("city, index")]),t._v(") ")]),t._v("{\n data.push({\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": city,\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("key")]),t._v(": index,\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("initial")]),t._v(": initials[index]\n });\n });\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" data;\n };\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data2")]),t._v(": generateData2(),\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value2")]),t._v(": [],\n filterMethod(query, item) {\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" item.initial.toLowerCase().indexOf(query.toLowerCase()) > "),s("span",{attrs:{class:"hljs-number"}},[t._v("-1")]),t._v(";\n }\n };\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(3),s("p",[t._v("You can customize list titles, button texts, render function for data items, checking status texts in list footer and list footer contents.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-transfer v-model="value3" filterable :left-default-checked="[2, 3]" :right-default-checked="[1]" :render-content="renderFunc" :titles="[\'Source\', \'Target\']" :button-texts="[\'To left\', \'To right\']" :footer-format="{\n noChecked: \'${total}\',\n hasChecked: \'${checked}/${total}\'\n }" @change="handleChange" :data="data">\n <el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>\n <el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>\n </el-transfer>\n</template>\n\n\n\n\n',script:"\n export default {\n data: function() {\n var generateData = function() {\n var data = [];\n for (var i = 1; i <= 15; i++) {\n data.push({\n key: i,\n label: 'Option' + i,\n disabled: i % 4 === 0\n });\n }\n return data;\n };\n return {\n data: generateData(),\n value3: [1],\n renderFunc(h, option) {\n return <span>{ option.key } - { option.label }</span>;\n }\n };\n },\n\n methods: {\n handleChange: function(value, direction, movedKeys) {\n console.log(value, direction, movedKeys);\n }\n }\n };\n",style:"\n .transfer-footer {\n margin-left: 20px;\n padding: 6px 5px;\n }\n"}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[s("el-transfer",{attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],"render-content":t.renderFunc,titles:["Source","Target"],"button-texts":["To left","To right"],"footer-format":{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:t.data},on:{change:t.handleChange},model:{value:t.value3,callback:function(s){t.value3=s},expression:"value3"}},[s("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[t._v("Operation")]),s("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[t._v("Operation")])],1)]],2),s("p",[t._v("Use "),s("code",[t._v("titles")]),t._v(", "),s("code",[t._v("button-texts")]),t._v(", "),s("code",[t._v("render-content")]),t._v(" and "),s("code",[t._v("footer-format")]),t._v(" to respectively customize list titles, button texts, render function for data items, checking status texts in list footer. For list footer contents, two named slots are provided: "),s("code",[t._v("left-footer")]),t._v(" and "),s("code",[t._v("right-footer")]),t._v(". Plus, if you want some items initially checked, you can use "),s("code",[t._v("left-default-checked")]),t._v(" and "),s("code",[t._v("right-default-checked")]),t._v(". Finally, this example demonstrate the "),s("code",[t._v("change")]),t._v(" event. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, "),s("code",[t._v("render-content")]),t._v(" will work if relevant dependencies are correctly configured.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-transfer")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value3"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("filterable")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":left-default-checked")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"[2, 3]"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":right-default-checked")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"[1]"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":render-content")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"renderFunc"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":titles")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v("\"['Source', 'Target']\"")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":button-texts")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v("\"['To left', 'To right']\"")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":footer-format")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v("\"{\n noChecked: '${total}',\n hasChecked: '${checked}/${total}'\n }\"")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@change")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleChange"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":data")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"data"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"transfer-footer"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("slot")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"left-footer"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("size")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"small"')]),t._v(">")]),t._v("Operation"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"transfer-footer"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("slot")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"right-footer"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("size")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"small"')]),t._v(">")]),t._v("Operation"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-transfer")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("style")]),t._v(">")]),s("span",{attrs:{class:"css"}},[t._v("\n "),s("span",{attrs:{class:"hljs-selector-class"}},[t._v(".transfer-footer")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("margin-left")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("20px")]),t._v(";\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("padding")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("6px")]),t._v(" "),s("span",{attrs:{class:"hljs-number"}},[t._v("5px")]),t._v(";\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("style")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" generateData = "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" data = [];\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("for")]),t._v(" ("),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" i = "),s("span",{attrs:{class:"hljs-number"}},[t._v("1")]),t._v("; i <= "),s("span",{attrs:{class:"hljs-number"}},[t._v("15")]),t._v("; i++) {\n data.push({\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("key")]),t._v(": i,\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Option'")]),t._v(" + i,\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("disabled")]),t._v(": i % "),s("span",{attrs:{class:"hljs-number"}},[t._v("4")]),t._v(" === "),s("span",{attrs:{class:"hljs-number"}},[t._v("0")]),t._v("\n });\n }\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" data;\n };\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": generateData(),\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value3")]),t._v(": ["),s("span",{attrs:{class:"hljs-number"}},[t._v("1")]),t._v("],\n renderFunc(h, option) {\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" "),s("span",{attrs:{class:"xml"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("{ option.key } - { option.label }"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")])]),t._v(";\n }\n };\n },\n\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("methods")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("handleChange")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("value, direction, movedKeys")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("console")]),t._v(".log(value, direction, movedKeys);\n }\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(4),t._m(5),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-transfer v-model="value4" :props="{\n key: \'value\',\n label: \'desc\'\n }" :data="data3">\n </el-transfer>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n var generateData3 = function() {\n var data = [];\n for (var i = 1; i <= 15; i++) {\n data.push({\n value: i,\n desc: 'Option' + i ,\n disabled: i % 4 === 0\n });\n }\n return data;\n };\n return {\n data3: generateData3(),\n value4: []\n };\n }\n };\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[s("el-transfer",{attrs:{props:{key:"value",label:"desc"},data:t.data3},model:{value:t.value4,callback:function(s){t.value4=s},expression:"value4"}})]],2),s("p",[t._v("The data items in this example do not have "),s("code",[t._v("key")]),t._v("s or "),s("code",[t._v("label")]),t._v("s, instead they have "),s("code",[t._v("value")]),t._v("s and "),s("code",[t._v("desc")]),t._v("s. So you need to set aliases for "),s("code",[t._v("key")]),t._v(" and "),s("code",[t._v("label")]),t._v(".")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-transfer")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value4"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":props")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v("\"{\n key: 'value',\n label: 'desc'\n }\"")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":data")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"data3"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-transfer")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" generateData3 = "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" data = [];\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("for")]),t._v(" ("),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" i = "),s("span",{attrs:{class:"hljs-number"}},[t._v("1")]),t._v("; i <= "),s("span",{attrs:{class:"hljs-number"}},[t._v("15")]),t._v("; i++) {\n data.push({\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v(": i,\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("desc")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Option'")]),t._v(" + i ,\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("disabled")]),t._v(": i % "),s("span",{attrs:{class:"hljs-number"}},[t._v("4")]),t._v(" === "),s("span",{attrs:{class:"hljs-number"}},[t._v("0")]),t._v("\n });\n }\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" data;\n };\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data3")]),t._v(": generateData3(),\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value4")]),t._v(": []\n };\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(6),t._m(7),t._m(8),t._m(9),t._m(10),t._m(11)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"transfer"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#transfer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Transfer")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"basic-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"filterable"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#filterable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filterable")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"customizable"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#customizable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customizable")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"prop-aliases"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#prop-aliases","aria-hidden":"true"}},[this._v("¶")]),this._v(" Prop aliases")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[s._v("By default, Transfer looks for "),t("code",{pre:!0},[s._v("key")]),s._v(", "),t("code",{pre:!0},[s._v("label")]),s._v(" and "),t("code",{pre:!0},[s._v("disabled")]),s._v(" in a data item. If your data items have different key names, you can use the "),t("code",{pre:!0},[s._v("props")]),s._v(" attribute to define aliases.")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("data")]),t("td",[s._v("data source")]),t("td",[s._v("array[{ key, label, disabled }]")]),t("td",[s._v("—")]),t("td",[s._v("[ ]")])]),t("tr",[t("td",[s._v("filterable")]),t("td",[s._v("whether Transfer is filterable")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("filter-placeholder")]),t("td",[s._v("placeholder for the filter input")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("Enter keyword")])]),t("tr",[t("td",[s._v("filter-method")]),t("td",[s._v("custom filter method")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("titles")]),t("td",[s._v("custom list titles")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("['List 1', 'List 2']")])]),t("tr",[t("td",[s._v("button-texts")]),t("td",[s._v("custom button texts")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("[ ]")])]),t("tr",[t("td",[s._v("render-content")]),t("td",[s._v("custom render function for data items")]),t("td",[s._v("function(h, option)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("footer-format")]),t("td",[s._v("texts for checking status in list footer")]),t("td",[s._v("object{noChecked, hasChecked}")]),t("td",[s._v("—")]),t("td",[s._v("{ noChecked: '${total} items', hasChecked: '${checked}/${total} checked' }")])]),t("tr",[t("td",[s._v("props")]),t("td",[s._v("prop aliases for data source")]),t("td",[s._v("object{key, label, disabled}")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("left-default-checked")]),t("td",[s._v("key array of initially checked data items of the left list")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("[ ]")])]),t("tr",[t("td",[s._v("right-default-checked")]),t("td",[s._v("key array of initially checked data items of the right list")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("[ ]")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"slot"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Name")]),t("th",[s._v("Description")])])]),t("tbody",[t("tr",[t("td",[s._v("left-footer")]),t("td",[s._v("content of left list footer")])]),t("tr",[t("td",[s._v("right-footer")]),t("td",[s._v("content of right list footer")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"events"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Event Name")]),t("th",[s._v("Description")]),t("th",[s._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("triggers when data items change in the right list")]),t("td",[s._v("key array of current data items in the right list, transfer direction (left or right), moved item keys")])])])])}],!1,null,null,null);t.default=a.exports},875:function(s,t,a){"use strict";a.r(t);var l=[{label:"Level one 1",children:[{label:"Level two 1-1",children:[{label:"Level three 1-1-1"}]}]},{label:"Level one 2",children:[{label:"Level two 2-1",children:[{label:"Level three 2-1-1"}]},{label:"Level two 2-2",children:[{label:"Level three 2-2-1"}]}]},{label:"Level one 3",children:[{label:"Level two 3-1",children:[{label:"Level three 3-1-1"}]},{label:"Level two 3-2",children:[{label:"Level three 3-2-1"}]}]}],n=[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}],e=[{id:1,label:"Level one 1",children:[{id:3,label:"Level two 2-1",children:[{id:4,label:"Level three 3-1-1"},{id:5,label:"Level three 3-1-2",disabled:!0}]},{id:2,label:"Level two 2-2",disabled:!0,children:[{id:6,label:"Level three 3-2-1"},{id:7,label:"Level three 3-2-2",disabled:!0}]}]}],r=1e3,v=[{name:"region1"},{name:"region2"}],_=1,c={label:"name",children:"zones"},i={children:"children",label:"label"},o={watch:{filterText:function(s){this.$refs.tree2.filter(s)}},methods:{handleCheckChange:function(s,t,a){console.log(s,t,a)},handleNodeClick:function(s){console.log(s)},loadNode:function(s,t){var a;return 0===s.level?t([{name:"Root1"},{name:"Root2"}]):3<s.level?t([]):(a="region1"===s.data.name||"region2"!==s.data.name&&.5<Math.random(),void setTimeout(function(){var s=a?[{name:"zone"+_++},{name:"zone"+_++}]:[];t(s)},500))},getCheckedNodes:function(){console.log(this.$refs.tree.getCheckedNodes())},getCheckedKeys:function(){console.log(this.$refs.tree.getCheckedKeys())},setCheckedNodes:function(){this.$refs.tree.setCheckedNodes([{id:5,label:"二级 2-1"},{id:9,label:"三级 1-1-1"}])},setCheckedKeys:function(){this.$refs.tree.setCheckedKeys([3])},resetChecked:function(){this.$refs.tree.setCheckedKeys([])},append:function(s,t){s.append({id:r++,label:"testtest",children:[]},t)},remove:function(s,t){s.remove(t)},renderContent:function(s,t){var a=t.node,l=t.data,n=t.store;return s("span",{style:"white-space: normal"},[s("span",[s("span",[a.label])]),s("span",{style:"float: right; margin-right: 20px"},[s("el-button",{attrs:{size:"mini"},on:{click:function(){_this.append(n,l)}}},["Append"]),s("el-button",{attrs:{size:"mini"},on:{click:function(){_this.remove(n,l)}}},["Delete"])])])},filterNode:function(s,t){return!s||-1!==t.label.indexOf(s)}},data:function(){return{data:l,data2:n,data3:e,regions:v,defaultProps:i,props:c,defaultCheckedKeys:[5],defaultExpandedKeys:[2,3],filterText:""}}},a=(a(761),a(0)),a=Object(a.a)(o,function(){var t=this,s=t.$createElement,s=t._self._c||s;return s("section",[t._m(0),s("p",[t._v("Display a set of data with hierarchies.")]),t._m(1),s("p",[t._v("Basic tree structure.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>\n\n\n',script:"\n export default {\n data() {\n return {\n data: [{\n label: 'Level one 1',\n children: [{\n label: 'Level two 1-1',\n children: [{\n label: 'Level three 1-1-1'\n }]\n }]\n }, {\n label: 'Level one 2',\n children: [{\n label: 'Level two 2-1',\n children: [{\n label: 'Level three 2-1-1'\n }]\n }, {\n label: 'Level two 2-2',\n children: [{\n label: 'Level three 2-2-1'\n }]\n }]\n }, {\n label: 'Level one 3',\n children: [{\n label: 'Level two 3-1',\n children: [{\n label: 'Level three 3-1-1'\n }]\n }, {\n label: 'Level two 3-2',\n children: [{\n label: 'Level three 3-2-1'\n }]\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n },\n methods: {\n handleNodeClick(data) {\n console.log(data);\n }\n }\n };\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-tree",{attrs:{data:t.data,props:t.defaultProps},on:{"node-click":t.handleNodeClick}})],1),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tree")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":data")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"data"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":props")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"defaultProps"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@node-click")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleNodeClick"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tree")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n data() {\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level one 1'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level two 1-1'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level three 1-1-1'")]),t._v("\n }]\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level one 2'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level two 2-1'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level three 2-1-1'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level two 2-2'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level three 2-2-1'")]),t._v("\n }]\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level one 3'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level two 3-1'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level three 3-1-1'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level two 3-2'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level three 3-2-1'")]),t._v("\n }]\n }]\n }],\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("defaultProps")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'children'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'label'")]),t._v("\n }\n };\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("methods")]),t._v(": {\n handleNodeClick(data) {\n "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("console")]),t._v(".log(data);\n }\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(2),s("p",[t._v("Used for node selection. In the following example, data for each layer is acquired after being clicked. If there is no child data, the expanding icon will disappear.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tree :data="regions" :props="props" :load="loadNode" lazy show-checkbox @check-change="handleCheckChange">\n</el-tree>\n\n\n',script:"\n export default {\n data() {\n return {\n regions: [{\n 'name': 'region1'\n }, {\n 'name': 'region2'\n }],\n props: {\n label: 'name',\n children: 'zones'\n },\n count: 1\n };\n },\n methods: {\n handleCheckChange(data, checked, indeterminate) {\n console.log(data, checked, indeterminate);\n },\n handleNodeClick(data) {\n console.log(data);\n },\n loadNode(node, resolve) {\n if (node.level === 0) {\n return resolve([{ name: 'Root1' }, { name: 'Root2' }]);\n }\n if (node.level > 3) return resolve([]);\n\n var hasChild;\n if (node.data.name === 'region1') {\n hasChild = true;\n } else if (node.data.name === 'region2') {\n hasChild = false;\n } else {\n hasChild = Math.random() > 0.5;\n }\n\n setTimeout(function() {\n var data;\n if (hasChild) {\n data = [{\n name: 'zone' + this.count++\n }, {\n name: 'zone' + this.count++\n }];\n } else {\n data = [];\n }\n\n resolve(data);\n }, 500);\n }\n }\n };\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-tree",{attrs:{data:t.regions,props:t.props,load:t.loadNode,lazy:"","show-checkbox":""},on:{"check-change":t.handleCheckChange}})],1),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tree")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":data")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"regions"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":props")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"props"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":load")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"loadNode"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("lazy")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("show-checkbox")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@check-change")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleCheckChange"')]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tree")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n data() {\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("regions")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-string"}},[t._v("'name'")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'region1'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-string"}},[t._v("'name'")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'region2'")]),t._v("\n }],\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("props")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'name'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'zones'")]),t._v("\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("count")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("1")]),t._v("\n };\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("methods")]),t._v(": {\n handleCheckChange(data, checked, indeterminate) {\n "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("console")]),t._v(".log(data, checked, indeterminate);\n },\n handleNodeClick(data) {\n "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("console")]),t._v(".log(data);\n },\n loadNode(node, resolve) {\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("if")]),t._v(" (node.level === "),s("span",{attrs:{class:"hljs-number"}},[t._v("0")]),t._v(") {\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" resolve([{ "),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Root1'")]),t._v(" }, { "),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Root2'")]),t._v(" }]);\n }\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("if")]),t._v(" (node.level > "),s("span",{attrs:{class:"hljs-number"}},[t._v("3")]),t._v(") "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" resolve([]);\n\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" hasChild;\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("if")]),t._v(" (node.data.name === "),s("span",{attrs:{class:"hljs-string"}},[t._v("'region1'")]),t._v(") {\n hasChild = "),s("span",{attrs:{class:"hljs-literal"}},[t._v("true")]),t._v(";\n } "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("else")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("if")]),t._v(" (node.data.name === "),s("span",{attrs:{class:"hljs-string"}},[t._v("'region2'")]),t._v(") {\n hasChild = "),s("span",{attrs:{class:"hljs-literal"}},[t._v("false")]),t._v(";\n } "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("else")]),t._v(" {\n hasChild = "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("Math")]),t._v(".random() > "),s("span",{attrs:{class:"hljs-number"}},[t._v("0.5")]),t._v(";\n }\n\n setTimeout("),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" data;\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("if")]),t._v(" (hasChild) {\n data = [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'zone'")]),t._v(" + "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".count++\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'zone'")]),t._v(" + "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".count++\n }];\n } "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("else")]),t._v(" {\n data = [];\n }\n\n resolve(data);\n }, "),s("span",{attrs:{class:"hljs-number"}},[t._v("500")]),t._v(");\n }\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(3),s("p",[t._v("The checkbox of a node can be set as disabled.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tree :data="data3" :props="defaultProps" show-checkbox @check-change="handleCheckChange">\n</el-tree>\n\n\n',script:"\n export default {\n data: function() {\n return {\n data3: [{\n id: 1,\n label: 'Level one 1',\n children: [{\n id: 3,\n label: 'Level two 2-1',\n children: [{\n id: 4,\n label: 'Level three 3-1-1'\n }, {\n id: 5,\n label: 'Level three 3-1-2',\n disabled: true\n }]\n }, {\n id: 2,\n label: 'Level two 2-2',\n disabled: true,\n children: [{\n id: 6,\n label: 'Level three 3-2-1'\n }, {\n id: 7,\n label: 'Level three 3-2-2',\n disabled: true\n }]\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label',\n disabled: 'disabled',\n },\n };\n }\n };\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-tree",{attrs:{data:t.data3,props:t.defaultProps,"show-checkbox":""},on:{"check-change":t.handleCheckChange}})],1),s("p",[t._v("In the example, 'disabled' property is declared in defaultProps, and some nodes are set as 'disabled:true'. The corresponding checkboxes are disabled and can't be clicked.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tree")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":data")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"data3"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":props")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"defaultProps"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("show-checkbox")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@check-change")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleCheckChange"')]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tree")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data3")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("1")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level one 1'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("3")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level two 2-1'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("4")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level three 3-1-1'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("5")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level three 3-1-2'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("disabled")]),t._v(": "),s("span",{attrs:{class:"hljs-literal"}},[t._v("true")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("2")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level two 2-2'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("disabled")]),t._v(": "),s("span",{attrs:{class:"hljs-literal"}},[t._v("true")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("6")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level three 3-2-1'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("7")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level three 3-2-2'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("disabled")]),t._v(": "),s("span",{attrs:{class:"hljs-literal"}},[t._v("true")]),t._v("\n }]\n }]\n }],\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("defaultProps")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'children'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'label'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("disabled")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'disabled'")]),t._v(",\n },\n };\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(4),s("p",[t._v("Tree nodes can be initially expanded or checked")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tree :data="data2" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]" :props="defaultProps">\n</el-tree>\n\n\n',script:"\n export default {\n data: function() {\n return {\n data2: [{\n id: 1,\n label: 'Level one 1',\n children: [{\n id: 4,\n label: 'Level two 1-1',\n children: [{\n id: 9,\n label: 'Level three 1-1-1'\n }, {\n id: 10,\n label: 'Level three 1-1-2'\n }]\n }]\n }, {\n id: 2,\n label: 'Level one 2',\n children: [{\n id: 5,\n label: 'Level two 2-1'\n }, {\n id: 6,\n label: 'Level two 2-2'\n }]\n }, {\n id: 3,\n label: 'Level one 3',\n children: [{\n id: 7,\n label: 'Level two 3-1'\n }, {\n id: 8,\n label: 'Level two 3-2'\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n }\n };\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-tree",{attrs:{data:t.data2,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5],props:t.defaultProps}})],1),s("p",[t._v("Use "),s("code",[t._v("default-expanded-keys")]),t._v(" and "),s("code",[t._v("default-checked-keys")]),t._v(" to set initially expanded and initially checked nodes respectively. Note that for them to work, "),s("code",[t._v("node-key")]),t._v(" is required. Its value is the name of a key in the data object, and the value of that key should be unique across the whole tree.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tree")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":data")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"data2"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("show-checkbox")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("node-key")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"id"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":default-expanded-keys")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"[2, 3]"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":default-checked-keys")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"[5]"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":props")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"defaultProps"')]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tree")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data2")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("1")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level one 1'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("4")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level two 1-1'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("9")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level three 1-1-1'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("10")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level three 1-1-2'")]),t._v("\n }]\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("2")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level one 2'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("5")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level two 2-1'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("6")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level two 2-2'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("3")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level one 3'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("7")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level two 3-1'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("8")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level two 3-2'")]),t._v("\n }]\n }],\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("defaultProps")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'children'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'label'")]),t._v("\n }\n };\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(5),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tree :data="data2" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current :props="defaultProps">\n</el-tree>\n\n<div class="buttons">\n <el-button @click="getCheckedNodes">get by node</el-button>\n <el-button @click="getCheckedKeys">get by key</el-button>\n <el-button @click="setCheckedNodes">set by node</el-button>\n <el-button @click="setCheckedKeys">set by key</el-button>\n <el-button @click="resetChecked">reset</el-button>\n</div>\n\n\n',script:"\n export default {\n methods: {\n getCheckedNodes: function() {\n console.log(this.$refs.tree.getCheckedNodes());\n },\n getCheckedKeys: function() {\n console.log(this.$refs.tree.getCheckedKeys());\n },\n setCheckedNodes: function() {\n this.$refs.tree.setCheckedNodes([{\n id: 5,\n label: 'Level two 2-1'\n }, {\n id: 9,\n label: 'Level three 1-1-1'\n }]);\n },\n setCheckedKeys: function() {\n this.$refs.tree.setCheckedKeys([3]);\n },\n resetChecked: function() {\n this.$refs.tree.setCheckedKeys([]);\n }\n },\n\n data: function() {\n return {\n data2: [{\n id: 1,\n label: 'Level one 1',\n children: [{\n id: 4,\n label: 'Level two 1-1',\n children: [{\n id: 9,\n label: 'Level three 1-1-1'\n }, {\n id: 10,\n label: 'Level three 1-1-2'\n }]\n }]\n }, {\n id: 2,\n label: 'Level one 2',\n children: [{\n id: 5,\n label: 'Level two 2-1'\n }, {\n id: 6,\n label: 'Level two 2-2'\n }]\n }, {\n id: 3,\n label: 'Level one 3',\n children: [{\n id: 7,\n label: 'Level two 3-1'\n }, {\n id: 8,\n label: 'Level two 3-2'\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n }\n };\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-tree",{ref:"tree",attrs:{data:t.data2,"show-checkbox":"","default-expand-all":"","node-key":"id","highlight-current":"",props:t.defaultProps}}),s("div",{staticClass:"buttons"},[s("el-button",{on:{click:t.getCheckedNodes}},[t._v("get by node")]),s("el-button",{on:{click:t.getCheckedKeys}},[t._v("get by key")]),s("el-button",{on:{click:t.setCheckedNodes}},[t._v("set by node")]),s("el-button",{on:{click:t.setCheckedKeys}},[t._v("set by key")]),s("el-button",{on:{click:t.resetChecked}},[t._v("reset")])],1)],1),s("p",[t._v("This example shows how to get and set checked nodes. They both can be done in two approaches: node and key. If you are taking the key approach, "),s("code",[t._v("node-key")]),t._v(" is required.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tree")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":data")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"data2"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("show-checkbox")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("default-expand-all")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("node-key")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"id"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("ref")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"tree"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("highlight-current")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":props")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"defaultProps"')]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tree")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"buttons"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@click")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"getCheckedNodes"')]),t._v(">")]),t._v("get by node"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@click")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"getCheckedKeys"')]),t._v(">")]),t._v("get by key"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@click")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"setCheckedNodes"')]),t._v(">")]),t._v("set by node"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@click")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"setCheckedKeys"')]),t._v(">")]),t._v("set by key"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@click")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"resetChecked"')]),t._v(">")]),t._v("reset"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("methods")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("getCheckedNodes")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("console")]),t._v(".log("),s("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".$refs.tree.getCheckedNodes());\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("getCheckedKeys")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("console")]),t._v(".log("),s("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".$refs.tree.getCheckedKeys());\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("setCheckedNodes")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".$refs.tree.setCheckedNodes([{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("5")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level two 2-1'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("9")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level three 1-1-1'")]),t._v("\n }]);\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("setCheckedKeys")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".$refs.tree.setCheckedKeys(["),s("span",{attrs:{class:"hljs-number"}},[t._v("3")]),t._v("]);\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("resetChecked")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".$refs.tree.setCheckedKeys([]);\n }\n },\n\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data2")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("1")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level one 1'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("4")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level two 1-1'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("9")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level three 1-1-1'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("10")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level three 1-1-2'")]),t._v("\n }]\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("2")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level one 2'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("5")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level two 2-1'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("6")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level two 2-2'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("3")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level one 3'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("7")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level two 3-1'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("8")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level two 3-2'")]),t._v("\n }]\n }],\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("defaultProps")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'children'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'label'")]),t._v("\n }\n };\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(6),s("p",[t._v("The content of tree nodes can be customized, so you can add icons or buttons as you will")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tree :data="data2" :props="defaultProps" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false" :render-content="renderContent">\n</el-tree>\n\n\n',script:"\n var id = 1000;\n\n export default {\n data: function() {\n return {\n data2: [{\n id: 1,\n label: 'Level one 1',\n children: [{\n id: 4,\n label: 'Level two 1-1',\n children: [{\n id: 9,\n label: 'Level three 1-1-1'\n }, {\n id: 10,\n label: 'Level three 1-1-2'\n }]\n }]\n }, {\n id: 2,\n label: 'Level one 2',\n children: [{\n id: 5,\n label: 'Level two 2-1'\n }, {\n id: 6,\n label: 'Level two 2-2'\n }]\n }, {\n id: 3,\n label: 'Level one 3',\n children: [{\n id: 7,\n label: 'Level two 3-1'\n }, {\n id: 8,\n label: 'Level two 3-2'\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n }\n },\n\n methods: {\n append: function(store, data) {\n store.append({ id: id++, label: 'testtest', children: [] }, data);\n },\n\n remove: function(store, data) {\n store.remove(data);\n },\n\n renderContent: function(h, { node, data, store }) {\n var _this = this;\n return (\n <span>\n <span>\n <span>{node.label}</span>\n </span>\n <span style=\"float: right; margin-right: 20px\">\n <el-button size=\"mini\" on-click={ function() { _this.append(store, data) }}>Append</el-button>\n <el-button size=\"mini\" on-click={ function() { _this.remove(store, data) }}>Delete</el-button>\n </span>\n </span>);\n }\n }\n };\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-tree",{attrs:{data:t.data2,props:t.defaultProps,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1,"render-content":t.renderContent}})],1),s("p",[t._v("Use "),s("code",[t._v("render-content")]),t._v(" to assign a render function that returns the content of tree nodes. See Vue's documentation for a detailed introduction of render functions. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, "),s("code",[t._v("render-content")]),t._v(" will work if relevant dependencies are correctly configured.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tree")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":data")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"data2"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":props")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"defaultProps"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("show-checkbox")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("node-key")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"id"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("default-expand-all")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":expand-on-click-node")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"false"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":render-content")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"renderContent"')]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tree")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" id = "),s("span",{attrs:{class:"hljs-number"}},[t._v("1000")]),t._v(";\n\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data2")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("1")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level one 1'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("4")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level two 1-1'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("9")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level three 1-1-1'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("10")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level three 1-1-2'")]),t._v("\n }]\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("2")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level one 2'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("5")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level two 2-1'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("6")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level two 2-2'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("3")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level one 3'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("7")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level two 3-1'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("8")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level two 3-2'")]),t._v("\n }]\n }],\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("defaultProps")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'children'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'label'")]),t._v("\n }\n }\n },\n\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("methods")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("append")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("store, data")]),t._v(") ")]),t._v("{\n store.append({ "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": id++, "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'testtest'")]),t._v(", "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [] }, data);\n },\n\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("remove")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("store, data")]),t._v(") ")]),t._v("{\n store.remove(data);\n },\n\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("renderContent")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("h, { node, data, store }")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" _this = "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(";\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" (\n "),s("span",{attrs:{class:"xml"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("{node.label}"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("style")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"float: right; margin-right: 20px"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("size")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"mini"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("on-click")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v("{")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("function")]),t._v("() { "),s("span",{attrs:{class:"hljs-attr"}},[t._v("_this.append")]),t._v("("),s("span",{attrs:{class:"hljs-attr"}},[t._v("store")]),t._v(", "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(") }}>")]),t._v("Append"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("size")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"mini"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("on-click")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v("{")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("function")]),t._v("() { "),s("span",{attrs:{class:"hljs-attr"}},[t._v("_this.remove")]),t._v("("),s("span",{attrs:{class:"hljs-attr"}},[t._v("store")]),t._v(", "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(") }}>")]),t._v("Delete"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")])]),t._v(");\n }\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(7),s("p",[t._v("Tree nodes can be filtered")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input placeholder="Filter keyword" v-model="filterText">\n</el-input>\n\n<el-tree class="filter-tree" :data="data2" :props="defaultProps" default-expand-all :filter-node-method="filterNode" ref="tree2">\n</el-tree>\n\n\n',script:"\n export default {\n watch: {\n filterText: function(val) {\n this.$refs.tree2.filter(val);\n }\n },\n\n methods: {\n filterNode: function(value, data) {\n if (!value) return true;\n return data.label.indexOf(value) !== -1;\n }\n },\n\n data: function() {\n return {\n filterText: '',\n data2: [{\n id: 1,\n label: 'Level one 1',\n children: [{\n id: 4,\n label: 'Level two 1-1',\n children: [{\n id: 9,\n label: 'Level three 1-1-1'\n }, {\n id: 10,\n label: 'Level three 1-1-2'\n }]\n }]\n }, {\n id: 2,\n label: 'Level one 2',\n children: [{\n id: 5,\n label: 'Level two 2-1'\n }, {\n id: 6,\n label: 'Level two 2-2'\n }]\n }, {\n id: 3,\n label: 'Level one 3',\n children: [{\n id: 7,\n label: 'Level two 3-1'\n }, {\n id: 8,\n label: 'Level two 3-2'\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n }\n };\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-input",{attrs:{placeholder:"Filter keyword"},model:{value:t.filterText,callback:function(s){t.filterText=s},expression:"filterText"}}),s("el-tree",{ref:"tree2",staticClass:"filter-tree",attrs:{data:t.data2,props:t.defaultProps,"default-expand-all":"","filter-node-method":t.filterNode}})],1),s("p",[t._v("Invoke the "),s("code",[t._v("filter")]),t._v(" method of the Tree instance to filter tree nodes. Its parameter is the filtering keyword. Note that for it to work, "),s("code",[t._v("filter-node-method")]),t._v(" is required, and its value is the filtering method.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Filter keyword"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"filterText"')]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tree")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"filter-tree"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":data")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"data2"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":props")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"defaultProps"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("default-expand-all")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":filter-node-method")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"filterNode"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("ref")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"tree2"')]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tree")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("watch")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("filterText")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("val")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".$refs.tree2.filter(val);\n }\n },\n\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("methods")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("filterNode")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("value, data")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("if")]),t._v(" (!value) "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" "),s("span",{attrs:{class:"hljs-literal"}},[t._v("true")]),t._v(";\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" data.label.indexOf(value) !== "),s("span",{attrs:{class:"hljs-number"}},[t._v("-1")]),t._v(";\n }\n },\n\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("filterText")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data2")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("1")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level one 1'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("4")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level two 1-1'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("9")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level three 1-1-1'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("10")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level three 1-1-2'")]),t._v("\n }]\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("2")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level one 2'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("5")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level two 2-1'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("6")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level two 2-2'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("3")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level one 3'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("7")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level two 3-1'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("id")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("8")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level two 3-2'")]),t._v("\n }]\n }],\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("defaultProps")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'children'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'label'")]),t._v("\n }\n };\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(8),s("p",[t._v("Only one node among the same level can be expanded at one time.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tree :data="data" :props="defaultProps" accordion @node-click="handleNodeClick">\n</el-tree>\n\n\n',script:"\n export default {\n data: function() {\n return {\n data: [{\n label: 'Level one 1',\n children: [{\n label: 'Level two 1-1',\n children: [{\n label: 'Level three 1-1-1'\n }]\n }]\n }, {\n label: 'Level one 2',\n children: [{\n label: 'Level two 2-1',\n children: [{\n label: 'Level three 2-1-1'\n }]\n }, {\n label: 'Level two 2-2',\n children: [{\n label: 'Level three 2-2-1'\n }]\n }]\n }, {\n label: 'Level one 3',\n children: [{\n label: 'Level two 3-1',\n children: [{\n label: 'Level three 3-1-1'\n }]\n }, {\n label: 'Level two 3-2',\n children: [{\n label: 'Level three 3-2-1'\n }]\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n },\n methods: {\n handleNodeClick: function(data) {\n console.log(data);\n }\n }\n };\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-tree",{attrs:{data:t.data,props:t.defaultProps,accordion:""},on:{"node-click":t.handleNodeClick}})],1),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tree")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":data")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"data"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":props")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"defaultProps"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("accordion")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@node-click")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleNodeClick"')]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-tree")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level one 1'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level two 1-1'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level three 1-1-1'")]),t._v("\n }]\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level one 2'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level two 2-1'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level three 2-1-1'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level two 2-2'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level three 2-2-1'")]),t._v("\n }]\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level one 3'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level two 3-1'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level three 3-1-1'")]),t._v("\n }]\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level two 3-2'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Level three 3-2-1'")]),t._v("\n }]\n }]\n }],\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("defaultProps")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("children")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'children'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'label'")]),t._v("\n }\n };\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("methods")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("handleNodeClick")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("data")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("console")]),t._v(".log(data);\n }\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(9),t._m(10),t._m(11),t._m(12),t._m(13),t._m(14),t._m(15),t._m(16),t._m(17)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"tree"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#tree","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tree")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"basic-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"selectable"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#selectable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Selectable")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"disabled-checkbox"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#disabled-checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled checkbox")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"default-expanded-and-default-checked"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#default-expanded-and-default-checked","aria-hidden":"true"}},[this._v("¶")]),this._v(" Default expanded and default checked")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"checking-tree-nodes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#checking-tree-nodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checking tree nodes")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"custom-node-content"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#custom-node-content","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom node content")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"tree-node-filtering"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#tree-node-filtering","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tree node filtering")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"accordion"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#accordion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Accordion")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("data")]),t("td",[s._v("tree data")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("empty-text")]),t("td",[s._v("text displayed when data is void")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("node-key")]),t("td",[s._v("unique identity key name for nodes, its value should be unique across the whole tree")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("props")]),t("td",[s._v("configuration options, see the following table")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("load")]),t("td",[s._v("method for loading subtree data")]),t("td",[s._v("function(node, resolve)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("render-content")]),t("td",[s._v("render function for tree node")]),t("td",[s._v("Function(h, { node }")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("highlight-current")]),t("td",[s._v("whether current node is highlighted")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("current-node-key")]),t("td",[s._v("key of current node, a set only prop")]),t("td",[s._v("string, number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("default-expand-all")]),t("td",[s._v("whether to expand all nodes by default")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("expand-on-click-node")]),t("td",[s._v("whether to expand or collapse node when clicking on the node, if false, then expand or collapse node only when clicking on the arrow icon.")]),t("td",[s._v("—")]),t("td",[s._v("true")]),t("td")]),t("tr",[t("td",[s._v("auto-expand-parent")]),t("td",[s._v("whether to expand father node when a child node is expanded")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("default-expanded-keys")]),t("td",[s._v("array of keys of initially expanded nodes")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("show-checkbox")]),t("td",[s._v("whether node is selectable")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("check-strictly")]),t("td",[s._v("whether checked state of a node not affects its father and child nodes when "),t("code",{pre:!0},[s._v("show-checkbox")]),s._v(" is "),t("code",{pre:!0},[s._v("true")])]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("default-checked-keys")]),t("td",[s._v("array of keys of initially checked nodes")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("filter-node-method")]),t("td",[s._v("this function will be executed on each node when use filter method. if return "),t("code",{pre:!0},[s._v("false")]),s._v(", tree node will be hidden.")]),t("td",[s._v("Function(value, data, node)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("accordion")]),t("td",[s._v("whether only one node among the same level can be expanded at one time")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("indent")]),t("td",[s._v("horizontal indentation of nodes in adjacent levels in pixels")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("16")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"props"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._v(" props")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("label")]),t("td",[s._v("specify which key of node object is used as the node's label")]),t("td",[s._v("string, function(data, node)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("children")]),t("td",[s._v("specify which node object is used as the node's subtree")]),t("td",[s._v("string, function(data, node)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("specify which key of node object represents if node's checkbox is disabled")]),t("td",[s._v("boolean, function(data, node)")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"method"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#method","aria-hidden":"true"}},[this._v("¶")]),this._v(" Method")])},function(){var s=this.$createElement,s=this._self._c||s;return s("p",[s("code",{pre:!0},[this._v("Tree")]),this._v(" has the following method, which returns the currently selected array of nodes.")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Method")]),t("th",[s._v("Description")]),t("th",[s._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[s._v("filter")]),t("td",[s._v("filter all tree nodes, filtered nodes will be hidden")]),t("td",[s._v("Accept a parameter which will be used as first parameter for filter-node-method")])]),t("tr",[t("td",[s._v("getCheckedNodes")]),t("td",[s._v("If the node can be selected ("),t("code",{pre:!0},[s._v("show-checkbox")]),s._v(" is "),t("code",{pre:!0},[s._v("true")]),s._v("), it returns the currently selected array of nodes")]),t("td",[s._v("Accept a boolean type parameter whose default value is "),t("code",{pre:!0},[s._v("false")]),s._v(". If the parameter is "),t("code",{pre:!0},[s._v("true")]),s._v(", it only returns the currently selected array of sub-nodes.")])]),t("tr",[t("td",[s._v("setCheckedNodes")]),t("td",[s._v("set certain nodes to be checked, only works when "),t("code",{pre:!0},[s._v("node-key")]),s._v(" is assigned")]),t("td",[s._v("an array of nodes to be checked")])]),t("tr",[t("td",[s._v("getCheckedKeys")]),t("td",[s._v("If the node can be selected ("),t("code",{pre:!0},[s._v("show-checkbox")]),s._v(" is "),t("code",{pre:!0},[s._v("true")]),s._v("), it returns the currently selected array of node's keys")]),t("td",[s._v("(leafOnly) Accept a boolean type parameter whose default value is "),t("code",{pre:!0},[s._v("false")]),s._v(". If the parameter is "),t("code",{pre:!0},[s._v("true")]),s._v(", it only returns the currently selected array of sub-nodes.")])]),t("tr",[t("td",[s._v("setCheckedKeys")]),t("td",[s._v("set certain nodes to be checked, only works when "),t("code",{pre:!0},[s._v("node-key")]),s._v(" is assigned")]),t("td",[s._v("(keys, leafOnly) Accept two parameters: 1. an array of node's keys to be checked 2. a boolean type parameter whose default value is "),t("code",{pre:!0},[s._v("false")]),s._v(". If the parameter is "),t("code",{pre:!0},[s._v("true")]),s._v(", it only returns the currently selected array of sub-nodes.")])]),t("tr",[t("td",[s._v("setChecked")]),t("td",[s._v("set node to be checked or not, only works when "),t("code",{pre:!0},[s._v("node-key")]),s._v(" is assigned")]),t("td",[s._v("(key/data, checked, deep) Accept three parameters: 1. node's key or data to be checked 2. a boolean typed parameter indicating checked or not. 3. a boolean typed parameter indicating deep or not.")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"events"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Event Name")]),t("th",[s._v("Description")]),t("th",[s._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[s._v("node-click")]),t("td",[s._v("triggers when a node is clicked")]),t("td",[s._v("three parameters: node object corresponding to the node clicked, "),t("code",{pre:!0},[s._v("node")]),s._v(" property of TreeNode, TreeNode itself")])]),t("tr",[t("td",[s._v("check-change")]),t("td",[s._v("triggers when the selected state of the node changes")]),t("td",[s._v("three parameters: node object corresponding to the node whose selected state is changed, whether the node is selected, whether node's subtree has selected nodes")])]),t("tr",[t("td",[s._v("current-change")]),t("td",[s._v("triggers when current node changes")]),t("td",[s._v("two parameters: node object corresponding to the current node, "),t("code",{pre:!0},[s._v("node")]),s._v(" property of TreeNode")])]),t("tr",[t("td",[s._v("node-expand")]),t("td",[s._v("triggers when current node open")]),t("td",[s._v("three parameters: node object corresponding to the node opened, "),t("code",{pre:!0},[s._v("node")]),s._v(" property of TreeNode, TreeNode itself")])]),t("tr",[t("td",[s._v("node-collapse")]),t("td",[s._v("triggers when current node close")]),t("td",[s._v("three parameters: node object corresponding to the node closed, "),t("code",{pre:!0},[s._v("node")]),s._v(" property of TreeNode, TreeNode itself")])])])])}],!1,null,null,null);t.default=a.exports},876:function(s,t,a){"use strict";a.r(t);var l={data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"}],fileList2:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"}],fileList3:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"}],imageUrl:"",dialogImageUrl:"",dialogVisible:!1}},methods:{handleRemove:function(s,t){console.log(s,t)},beforeUpload:function(s){return!(4e7<s.size&&(console.warn(s.name+" is too large!"),1))},handlePreview:function(s){console.log(s)},handlePictureCardPreview:function(s){this.dialogImageUrl=s.url,this.dialogVisible=!0},submitUpload:function(){this.$refs.upload.submit()},handleAvatarSuccess:function(s,t){this.imageUrl=URL.createObjectURL(t.raw)},beforeAvatarUpload:function(s){var t="image/jpeg"===s.type,s=s.size/1024/1024<2;return t||this.$message.error("Avatar picture must be JPG format!"),s||this.$message.error("Avatar picture size can not exceed 2MB!"),t&&s},handleChange:function(s,t){this.fileList3=t.slice(-3)}}},a=(a(763),a(0)),a=Object(a.a)(l,function(){var t=this,s=t.$createElement,s=t._self._c||s;return s("section",[t._m(0),s("p",[t._v("Upload files by clicking or drag-and-drop")]),t._m(1),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList">\n <el-button size="small" type="primary">Click to upload</el-button>\n <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>\n</el-upload>\n\n',script:"\n export default {\n data() {\n return {\n fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]\n };\n },\n methods: {\n handleRemove(file, fileList) {\n console.log(file, fileList);\n },\n handlePreview(file) {\n console.log(file);\n }\n }\n }\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":t.handlePreview,"on-remove":t.handleRemove,"file-list":t.fileList}},[s("el-button",{attrs:{size:"small",type:"primary"}},[t._v("Click to upload")]),s("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[t._v("jpg/png files with a size less than 500kb")])],1)],1),s("p",[t._v("Customize upload button type and text using "),s("code",[t._v("slot")]),t._v(".")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-upload")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"upload-demo"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("action")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"https://jsonplaceholder.typicode.com/posts/"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":on-preview")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handlePreview"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":on-remove")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleRemove"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":file-list")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"fileList"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("size")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"small"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("type")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"primary"')]),t._v(">")]),t._v("Click to upload"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("slot")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"tip"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"el-upload__tip"')]),t._v(">")]),t._v("jpg/png files with a size less than 500kb"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-upload")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n data() {\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("fileList")]),t._v(": [{"),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'food.jpeg'")]),t._v(", "),s("span",{attrs:{class:"hljs-attr"}},[t._v("url")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),t._v("}, {"),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'food2.jpeg'")]),t._v(", "),s("span",{attrs:{class:"hljs-attr"}},[t._v("url")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),t._v("}]\n };\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("methods")]),t._v(": {\n handleRemove(file, fileList) {\n "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("console")]),t._v(".log(file, fileList);\n },\n handlePreview(file) {\n "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("console")]),t._v(".log(file);\n }\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(2),t._m(3),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">\n <img v-if="imageUrl" :src="imageUrl" class="avatar">\n <i v-else class="el-icon-plus avatar-uploader-icon"></i>\n</el-upload>\n\n\n\n\n',script:"\n export default {\n data: function() {\n return {\n imageUrl: ''\n };\n },\n methods: {\n handleAvatarSuccess: function(res, file) {\n this.imageUrl = URL.createObjectURL(file.raw);\n },\n beforeAvatarUpload: function(file) {\n var isJPG = file.type === 'image/jpeg';\n var isLt2M = file.size / 1024 / 1024 < 2;\n\n if (!isJPG) {\n this.$message.error('Avatar picture must be JPG format!');\n }\n if (!isLt2M) {\n this.$message.error('Avatar picture size can not exceed 2MB!');\n }\n return isJPG && isLt2M;\n }\n }\n }\n",style:"\n .avatar-uploader .el-upload {\n border: 1px dashed #d9d9d9;\n border-radius: 6px;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n }\n .avatar-uploader .el-upload:hover {\n border-color: #20a0ff;\n }\n .avatar-uploader-icon {\n font-size: 28px;\n color: #8c939d;\n width: 178px;\n height: 178px;\n line-height: 178px;\n text-align: center;\n }\n .avatar {\n width: 178px;\n height: 178px;\n display: block;\n }\n"}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-upload",{staticClass:"avatar-uploader",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","show-file-list":!1,"on-success":t.handleAvatarSuccess,"before-upload":t.beforeAvatarUpload}},[t.imageUrl?s("img",{staticClass:"avatar",attrs:{src:t.imageUrl}}):s("i",{staticClass:"el-icon-plus avatar-uploader-icon"})])],1),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-upload")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"avatar-uploader"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("action")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"https://jsonplaceholder.typicode.com/posts/"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":show-file-list")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"false"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":on-success")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleAvatarSuccess"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":before-upload")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"beforeAvatarUpload"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("img")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-if")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"imageUrl"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":src")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"imageUrl"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"avatar"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("i")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-else")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"el-icon-plus avatar-uploader-icon"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("i")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-upload")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("style")]),t._v(">")]),s("span",{attrs:{class:"css"}},[t._v("\n "),s("span",{attrs:{class:"hljs-selector-class"}},[t._v(".avatar-uploader")]),t._v(" "),s("span",{attrs:{class:"hljs-selector-class"}},[t._v(".el-upload")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("border")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("1px")]),t._v(" dashed "),s("span",{attrs:{class:"hljs-number"}},[t._v("#d9d9d9")]),t._v(";\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("border-radius")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("6px")]),t._v(";\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("cursor")]),t._v(": pointer;\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("position")]),t._v(": relative;\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("overflow")]),t._v(": hidden;\n }\n "),s("span",{attrs:{class:"hljs-selector-class"}},[t._v(".avatar-uploader")]),t._v(" "),s("span",{attrs:{class:"hljs-selector-class"}},[t._v(".el-upload")]),s("span",{attrs:{class:"hljs-selector-pseudo"}},[t._v(":hover")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("border-color")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("#20a0ff")]),t._v(";\n }\n "),s("span",{attrs:{class:"hljs-selector-class"}},[t._v(".avatar-uploader-icon")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("font-size")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("28px")]),t._v(";\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("color")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("#8c939d")]),t._v(";\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("width")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("178px")]),t._v(";\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("height")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("178px")]),t._v(";\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("line-height")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("178px")]),t._v(";\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("text-align")]),t._v(": center;\n }\n "),s("span",{attrs:{class:"hljs-selector-class"}},[t._v(".avatar")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("width")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("178px")]),t._v(";\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("height")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("178px")]),t._v(";\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("display")]),t._v(": block;\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("style")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("imageUrl")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v("\n };\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("methods")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("handleAvatarSuccess")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("res, file")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".imageUrl = URL.createObjectURL(file.raw);\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("beforeAvatarUpload")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("file")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" isJPG = file.type === "),s("span",{attrs:{class:"hljs-string"}},[t._v("'image/jpeg'")]),t._v(";\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" isLt2M = file.size / "),s("span",{attrs:{class:"hljs-number"}},[t._v("1024")]),t._v(" / "),s("span",{attrs:{class:"hljs-number"}},[t._v("1024")]),t._v(" < "),s("span",{attrs:{class:"hljs-number"}},[t._v("2")]),t._v(";\n\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("if")]),t._v(" (!isJPG) {\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".$message.error("),s("span",{attrs:{class:"hljs-string"}},[t._v("'Avatar picture must be JPG format!'")]),t._v(");\n }\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("if")]),t._v(" (!isLt2M) {\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".$message.error("),s("span",{attrs:{class:"hljs-string"}},[t._v("'Avatar picture size can not exceed 2MB!'")]),t._v(");\n }\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" isJPG && isLt2M;\n }\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(4),t._m(5),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">\n <i class="el-icon-plus"></i>\n</el-upload>\n<el-dialog v-model="dialogVisible" size="tiny">\n <img width="100%" :src="dialogImageUrl" alt>\n</el-dialog>\n\n',script:"\n export default {\n data: function() {\n return {\n dialogImageUrl: '',\n dialogVisible: false\n };\n },\n methods: {\n handleRemove: function(file, fileList) {\n console.log(file, fileList);\n },\n handlePictureCardPreview: function(file) {\n this.dialogImageUrl = file.url;\n this.dialogVisible = true;\n }\n }\n }\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-upload",{attrs:{action:"https://jsonplaceholder.typicode.com/posts/","list-type":"picture-card","on-preview":t.handlePictureCardPreview,"on-remove":t.handleRemove}},[s("i",{staticClass:"el-icon-plus"})]),s("el-dialog",{attrs:{size:"tiny"},model:{value:t.dialogVisible,callback:function(s){t.dialogVisible=s},expression:"dialogVisible"}},[s("img",{attrs:{width:"100%",src:t.dialogImageUrl,alt:""}})])],1),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-upload")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("action")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"https://jsonplaceholder.typicode.com/posts/"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("list-type")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"picture-card"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":on-preview")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handlePictureCardPreview"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":on-remove")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleRemove"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("i")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"el-icon-plus"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("i")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-upload")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-dialog")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"dialogVisible"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("size")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"tiny"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("img")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("width")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"100%"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":src")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"dialogImageUrl"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("alt")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('""')]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-dialog")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("dialogImageUrl")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("dialogVisible")]),t._v(": "),s("span",{attrs:{class:"hljs-literal"}},[t._v("false")]),t._v("\n };\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("methods")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("handleRemove")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("file, fileList")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("console")]),t._v(".log(file, fileList);\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("handlePictureCardPreview")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("file")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".dialogImageUrl = file.url;\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".dialogVisible = "),s("span",{attrs:{class:"hljs-literal"}},[t._v("true")]),t._v(";\n }\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(6),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList2" list-type="picture">\n <el-button size="small" type="primary">Click to upload</el-button>\n <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>\n</el-upload>\n\n',script:"\n export default {\n data: function() {\n return {\n fileList2: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]\n };\n },\n methods: {\n handleRemove: function(file, fileList) {\n console.log(file, fileList);\n },\n handlePreview: function(file) {\n console.log(file);\n }\n }\n }\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":t.handlePreview,"on-remove":t.handleRemove,"file-list":t.fileList2,"list-type":"picture"}},[s("el-button",{attrs:{size:"small",type:"primary"}},[t._v("Click to upload")]),s("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[t._v("jpg/png files with a size less than 500kb")])],1)],1),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-upload")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"upload-demo"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("action")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"https://jsonplaceholder.typicode.com/posts/"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":on-preview")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handlePreview"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":on-remove")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleRemove"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":file-list")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"fileList2"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("list-type")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"picture"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("size")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"small"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("type")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"primary"')]),t._v(">")]),t._v("Click to upload"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("slot")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"tip"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"el-upload__tip"')]),t._v(">")]),t._v("jpg/png files with a size less than 500kb"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-upload")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("fileList2")]),t._v(": [{"),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'food.jpeg'")]),t._v(", "),s("span",{attrs:{class:"hljs-attr"}},[t._v("url")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),t._v("}, {"),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'food2.jpeg'")]),t._v(", "),s("span",{attrs:{class:"hljs-attr"}},[t._v("url")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),t._v("}]\n };\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("methods")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("handleRemove")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("file, fileList")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("console")]),t._v(".log(file, fileList);\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("handlePreview")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("file")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("console")]),t._v(".log(file);\n }\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(7),t._m(8),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-change="handleChange" :file-list="fileList3">\n <el-button size="small" type="primary">Click to upload</el-button>\n <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>\n</el-upload>\n\n',script:"\n export default {\n data: function() {\n return {\n fileList3: [{\n name: 'food.jpeg',\n url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',\n status: 'finished'\n }, {\n name: 'food2.jpeg',\n url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',\n status: 'finished'\n }]\n };\n },\n methods: {\n handleChange: function(file, fileList) {\n this.fileList3 = fileList.slice(-3);\n }\n }\n }\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-change":t.handleChange,"file-list":t.fileList3}},[s("el-button",{attrs:{size:"small",type:"primary"}},[t._v("Click to upload")]),s("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[t._v("jpg/png files with a size less than 500kb")])],1)],1),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-upload")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"upload-demo"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("action")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"https://jsonplaceholder.typicode.com/posts/"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":on-change")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleChange"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":file-list")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"fileList3"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("size")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"small"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("type")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"primary"')]),t._v(">")]),t._v("Click to upload"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("slot")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"tip"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"el-upload__tip"')]),t._v(">")]),t._v("jpg/png files with a size less than 500kb"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-upload")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("fileList3")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'food.jpeg'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("url")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("status")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'finished'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'food2.jpeg'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("url")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("status")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'finished'")]),t._v("\n }]\n };\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("methods")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("handleChange")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("file, fileList")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".fileList3 = fileList.slice("),s("span",{attrs:{class:"hljs-number"}},[t._v("-3")]),t._v(");\n }\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(9),s("p",[t._v("You can drag your file to a certain area to upload it.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" multiple>\n <i class="el-icon-upload"></i>\n <div class="el-upload__text">Drop file here or <em>click to upload</em></div>\n <div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>\n</el-upload>\n',script:null,style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-upload",{staticClass:"upload-demo",attrs:{drag:"",action:"https://jsonplaceholder.typicode.com/posts/","on-preview":t.handlePreview,"on-remove":t.handleRemove,"file-list":t.fileList,multiple:""}},[s("i",{staticClass:"el-icon-upload"}),s("div",{staticClass:"el-upload__text"},[t._v("Drop file here or "),s("em",[t._v("click to upload")])]),s("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[t._v("jpg/png files with a size less than 500kb")])])],1),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-upload")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"upload-demo"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("drag")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("action")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"https://jsonplaceholder.typicode.com/posts/"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":on-preview")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handlePreview"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":on-remove")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleRemove"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":file-list")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"fileList"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("multiple")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("i")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"el-icon-upload"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("i")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"el-upload__text"')]),t._v(">")]),t._v("Drop file here or "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("em")]),t._v(">")]),t._v("click to upload"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("em")]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"el-upload__tip"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("slot")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"tip"')]),t._v(">")]),t._v("jpg/png files with a size less than 500kb"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-upload")]),t._v(">")]),t._v("\n")])])])]),t._m(10),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :auto-upload="false">\n <el-button slot="trigger" size="small" type="primary">select file</el-button>\n <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">upload to server</el-button>\n <div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>\n</el-upload>\n\n',script:"\n export default {\n methods: {\n submitUpload: function() {\n this.$refs.upload.submit();\n }\n }\n }\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-upload",{ref:"upload",staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","auto-upload":!1}},[s("el-button",{attrs:{slot:"trigger",size:"small",type:"primary"},slot:"trigger"},[t._v("select file")]),s("el-button",{staticStyle:{"margin-left":"10px"},attrs:{size:"small",type:"success"},on:{click:t.submitUpload}},[t._v("upload to server")]),s("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[t._v("jpg/png files with a size less than 500kb")])],1)],1),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-upload")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"upload-demo"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("ref")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"upload"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("action")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"https://jsonplaceholder.typicode.com/posts/"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":auto-upload")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"false"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("slot")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"trigger"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("size")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"small"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("type")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"primary"')]),t._v(">")]),t._v("select file"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("style")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"margin-left: 10px;"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("size")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"small"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("type")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"success"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@click")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"submitUpload"')]),t._v(">")]),t._v("upload to server"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"el-upload__tip"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("slot")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"tip"')]),t._v(">")]),t._v("jpg/png files with a size less than 500kb"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-upload")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("methods")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("submitUpload")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".$refs.upload.submit();\n }\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(11),t._m(12),t._m(13),t._m(14)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"upload"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#upload","aria-hidden":"true"}},[this._v("¶")]),this._v(" Upload")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"click-to-upload-files"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#click-to-upload-files","aria-hidden":"true"}},[this._v("¶")]),this._v(" Click to upload files")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"user-avatar-upload"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#user-avatar-upload","aria-hidden":"true"}},[this._v("¶")]),this._v(" User avatar upload")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[s._v("Use "),t("code",{pre:!0},[s._v("before-upload")]),s._v(" hook to limit the upload file format and size.")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"photo-wall"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#photo-wall","aria-hidden":"true"}},[this._v("¶")]),this._v(" Photo Wall")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[s._v("Use "),t("code",{pre:!0},[s._v("list-type")]),s._v(" to change the fileList style.")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"filelist-with-thumbnail"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#filelist-with-thumbnail","aria-hidden":"true"}},[this._v("¶")]),this._v(" FileList with thumbnail")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"file-list-control"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#file-list-control","aria-hidden":"true"}},[this._v("¶")]),this._v(" File list control")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[s._v("Use "),t("code",{pre:!0},[s._v("on-change")]),s._v(" hook function to control upload file list")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"drag-to-upload"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#drag-to-upload","aria-hidden":"true"}},[this._v("¶")]),this._v(" Drag to upload")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"manual-upload"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#manual-upload","aria-hidden":"true"}},[this._v("¶")]),this._v(" Manual upload")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("action")]),t("td",[s._v("required, request URL")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("headers")]),t("td",[s._v("request headers")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("multiple")]),t("td",[s._v("whether uploading multiple files is permitted")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("data")]),t("td",[s._v("additions options of request")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("key name for uploaded file")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("file")])]),t("tr",[t("td",[s._v("with-credentials")]),t("td",[s._v("whether cookies are sent")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("show-file-list")]),t("td",[s._v("whether to show the uploaded file list")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("drag")]),t("td",[s._v("whether to activate drag and drop mode")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("accept")]),t("td",[s._v("accepted "),t("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept"}},[s._v("file types")]),s._v(", will not work when "),t("code",{pre:!0},[s._v("thumbnail-mode")]),s._v(" is "),t("code",{pre:!0},[s._v("true")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("on-preview")]),t("td",[s._v("hook function when clicking the uploaded files")]),t("td",[s._v("function(file)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("on-remove")]),t("td",[s._v("hook function when files are removed")]),t("td",[s._v("function(file, fileList)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("on-success")]),t("td",[s._v("hook function when uploaded successfully")]),t("td",[s._v("function(response, file, fileList)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("on-error")]),t("td",[s._v("hook function when some errors occurs")]),t("td",[s._v("function(err, file, fileList)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("on-progress")]),t("td",[s._v("hook function when some progress occurs")]),t("td",[s._v("function(event, file, fileList)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("on-change")]),t("td",[s._v("hook function when select file or upload file success or upload file fail")]),t("td",[s._v("function(file, fileList)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("before-upload")]),t("td",[s._v("hook function before uploading with the file to be uploaded as its parameter. If "),t("code",{pre:!0},[s._v("false")]),s._v(" is returned or a "),t("code",{pre:!0},[s._v("Promise")]),s._v(" is returned and then is rejected, uploading will be aborted")]),t("td",[s._v("function(file)")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("thumbnail-mode")]),t("td",[s._v("whether thumbnail is displayed")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("file-list")]),t("td",[s._v("default uploaded files, e.g. [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]")]),t("td",[s._v("array")]),t("td",[s._v("—")]),t("td",[s._v("[]")])]),t("tr",[t("td",[s._v("list-type")]),t("td",[s._v("type of fileList")]),t("td",[s._v("string")]),t("td",[s._v("text/picture/picture-card")]),t("td",[s._v("text")])]),t("tr",[t("td",[s._v("auto-upload")]),t("td",[s._v("whether to auto upload file")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("http-request")]),t("td",[s._v("override default xhr behavior, allowing you to implement your own upload-file's request")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("whether to disable upload")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"methods"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Methods Name")]),t("th",[s._v("Description")]),t("th",[s._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[s._v("clearFiles")]),t("td",[s._v("clear the uploaded file list (this method is not supported in the "),t("code",{pre:!0},[s._v("before-upload")]),s._v(" hook)")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("abort")]),t("td",[s._v("cancel upload request")]),t("td",[s._v("( file: fileList's item )")])])])])}],!1,null,null,null);t.default=a.exports},879:function(s,t,a){"use strict";a.r(t);a(620);var l=a(0),l=Object(l.a)({},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("div",[t("h2",[s._v("Design Disciplines")]),t("el-row",{staticClass:"cards",attrs:{gutter:14}},[t("el-col",{attrs:{xs:12,sm:6}},[t("div",{staticClass:"card"},[t("img",{attrs:{src:a(464),alt:"Consistency"}}),t("h4",[s._v("Consistency")]),t("span")])]),t("el-col",{attrs:{xs:12,sm:6}},[t("div",{staticClass:"card"},[t("img",{attrs:{src:a(413),alt:"Feedback"}}),t("h4",[s._v("Feedback")]),t("span")])]),t("el-col",{attrs:{xs:12,sm:6}},[t("div",{staticClass:"card"},[t("img",{attrs:{src:a(465),alt:"Efficiency"}}),t("h4",[s._v("Efficiency")]),t("span")])]),t("el-col",{attrs:{xs:12,sm:6}},[t("div",{staticClass:"card"},[t("img",{attrs:{src:a(466),alt:"Controllability"}}),t("h4",[s._v("Controllability")]),t("span")])])],1),t("h3",[s._v("Consistency")]),s._m(0),t("h3",[s._v("Feedback")]),s._m(1),t("h3",[s._v("Efficiency")]),s._m(2),t("h3",[s._v("Controllability")]),s._m(3)],1)},[function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("ul",[t("li",[t("strong",[s._v("Consistent with real life: ")]),s._v("in line with the process and logic of real life, and comply with languages and habits that the users are used to.")]),t("li",[t("strong",[s._v("Consistent within interface: ")]),s._v("all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("ul",[t("li",[t("strong",[s._v("Operation feedback: ")]),s._v("enable the users to clearly perceive their operations by style updates and interactive effects.")]),t("li",[t("strong",[s._v("Visual feedback: ")]),s._v("reflect current state by updating or rearranging elements of the page.")])])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("ul",[t("li",[t("strong",[s._v("Simplify the process: ")]),s._v("keep operating process simple and intuitive.")]),t("li",[t("strong",[s._v("Definite and clear: ")]),s._v("enunciate your intentions clearly so that the users can quickly understand and make decisions.")]),t("li",[t("strong",[s._v("Easy to identify: ")]),s._v("the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("ul",[t("li",[t("strong",[s._v("Decision making: ")]),s._v("giving advices about operations is acceptable, but do not make decisions for the users.")]),t("li",[t("strong",[s._v("Controlled consequences: ")]),s._v("users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])}],!1,null,"831c7a96",null);t.default=l.exports},880:function(s,t,a){"use strict";a.r(t);var l=[function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("div",{staticClass:"page-container page-resource"},[t("h2",[s._v("Resource")]),t("p",[s._v("Here you can download design resources and tools that shaped Element UI. More design resources are being prepared.")]),t("div",{staticClass:"cards"},[t("ul",{staticClass:"container"},[t("li",[t("div",{staticClass:"card"},[t("img",{attrs:{src:a(481),alt:""}}),t("h3",[s._v("Axure Components")]),t("p",[s._v("By importing Element UI in Axure, you can easily apply all the components we provide during interaction design.")]),t("a",{attrs:{href:"https://github.com/ElementUIYuwpUI/Resources/raw/master/Element_Components_v1.1.0.rplib"}},[s._v("Download")])])]),t("li",[t("div",{staticClass:"card"},[t("img",{attrs:{src:a(482),alt:""}}),t("h3",[s._v("Sketch Template")]),t("p",[s._v("Apply components from Element template, so you can improve design efficiency while keeping a unified visual style.")]),t("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v1.3.sketch"}},[s._v("Download")])])]),t("li",[t("div",{staticClass:"card"},[t("img",{attrs:{src:a(483),alt:""}}),t("h3",[s._v("Interaction Design Documentation")]),t("p",[s._v("Take a closer look at the interaction design documentation. Learn more details of each component from a microcosmic perspective.")]),t("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element%20Components%20Documentation.zip"}},[s._v("Download")])])])])])])}],n=(a(624),a(0)),n=Object(n.a)({},function(){var s=this.$createElement;this._self._c;return this._m(0)},l,!1,null,"d467f312",null);t.default=n.exports},894:function(s,t,a){"use strict";a.r(t);a(723);a=a(0),a=Object(a.a)({},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("section",[s._m(0),t("p",[s._v("A number or status mark on buttons and icons.")]),s._m(1),t("p",[s._v("Displays the amount of new messages.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-badge :value="12" class="item">\n <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge :value="3" class="item">\n <el-button size="small">replies</el-button>\n</el-badge>\n\n<el-dropdown trigger="click">\n <span class="el-dropdown-link">\n Click Me<i class="el-icon-caret-bottom el-icon--right"></i>\n </span>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item class="clearfix">\n comments\n <el-badge class="mark" :value="12">\n </el-badge></el-dropdown-item>\n <el-dropdown-item class="clearfix">\n replies\n <el-badge class="mark" :value="3">\n </el-badge></el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-badge",{staticClass:"item",attrs:{value:12}},[t("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),t("el-badge",{staticClass:"item",attrs:{value:3}},[t("el-button",{attrs:{size:"small"}},[s._v("replies")])],1),t("el-dropdown",{attrs:{trigger:"click"}},[t("span",{staticClass:"el-dropdown-link"},[s._v("\n Click Me"),t("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),t("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[t("el-dropdown-item",{staticClass:"clearfix"},[s._v("\n comments\n "),t("el-badge",{staticClass:"mark",attrs:{value:12}})],1),t("el-dropdown-item",{staticClass:"clearfix"},[s._v("\n replies\n "),t("el-badge",{staticClass:"mark",attrs:{value:3}})],1)],1)],1)],1),t("p",[s._v("The amount is defined with "),t("code",[s._v("value")]),s._v(" which accepts "),t("code",[s._v("Number")]),s._v(" or "),t("code",[s._v("String")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("comments"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("replies"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"click"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Click Me"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"clearfix"')]),s._v(">")]),s._v("\n comments\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"mark"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(" />")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"clearfix"')]),s._v(">")]),s._v("\n replies\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"mark"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" />")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"css"}},[s._v("\n"),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".item")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-top")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(";\n}\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("You can customize the max value.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-badge :value="200" :max="99" class="item">\n <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge :value="100" :max="10" class="item">\n <el-button size="small">replies</el-button>\n</el-badge>\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-badge",{staticClass:"item",attrs:{value:200,max:99}},[t("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),t("el-badge",{staticClass:"item",attrs:{value:100,max:10}},[t("el-button",{attrs:{size:"small"}},[s._v("replies")])],1)],1),t("p",[s._v("The max value is defined by property "),t("code",[s._v("max")]),s._v(" which is a "),t("code",[s._v("Number")]),s._v(". Note that it only works when "),t("code",[s._v("value")]),s._v(" is also a "),t("code",[s._v("Number")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":max")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"99"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("comments"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":max")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("replies"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"css"}},[s._v("\n"),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".item")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-top")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(";\n}\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Displays text content other than numbers.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-badge value="new" class="item">\n <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge value="hot" class="item">\n <el-button size="small">replies</el-button>\n</el-badge>\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-badge",{staticClass:"item",attrs:{value:"new"}},[t("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),t("el-badge",{staticClass:"item",attrs:{value:"hot"}},[t("el-button",{attrs:{size:"small"}},[s._v("replies")])],1)],1),t("p",[s._v("When "),t("code",[s._v("value")]),s._v(" is a "),t("code",[s._v("String")]),s._v(", it can display customized text.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"new"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("comments"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"hot"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("replies"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"css"}},[s._v("\n"),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".item")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-top")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(";\n}\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("Use a red dot to mark content that needs to be noticed.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-badge is-dot class="item">query</el-badge>\n<el-badge is-dot class="item">\n <el-button class="share-button" icon="share" type="primary"></el-button>\n</el-badge>\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[s._v("query")]),t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[t("el-button",{staticClass:"share-button",attrs:{icon:"share",type:"primary"}})],1)],1),t("p",[s._v("Use the attribute "),t("code",[s._v("is-dot")]),s._v(". It is a "),t("code",[s._v("Boolean")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("is-dot")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("query"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("is-dot")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"share-button"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"share"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"css"}},[s._v("\n"),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".item")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-top")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(";\n}\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"badge"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#badge","aria-hidden":"true"}},[this._v("¶")]),this._v(" Badge")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"basic-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"max-value"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#max-value","aria-hidden":"true"}},[this._v("¶")]),this._v(" Max value")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"customizations"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#customizations","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customizations")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"little-red-dot"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#little-red-dot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Little red dot")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("value")]),t("td",[s._v("display value")]),t("td",[s._v("string, number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("max")]),t("td",[s._v("maximum value, shows '{max}+' when exceeded. Only works if "),t("code",{pre:!0},[s._v("value")]),s._v(" is a "),t("code",{pre:!0},[s._v("Number")])]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("is-dot")]),t("td",[s._v("if a little dot is displayed")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("hidden")]),t("td",[s._v("hidden badge")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])}],!1,null,"d07dee1c",null);t.default=a.exports},895:function(s,t,a){"use strict";a.r(t);a=a(0),a=Object(a.a)({},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("section",[s._m(0),t("p",[s._v("Displays the location of the current page, making it easier to browser back.")]),s._m(1),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-breadcrumb separator="/">\n <el-breadcrumb-item :to="{ path: \'/\' }">homepage</el-breadcrumb-item>\n <el-breadcrumb-item>promotion management</el-breadcrumb-item>\n <el-breadcrumb-item>promotion list</el-breadcrumb-item>\n <el-breadcrumb-item>promotion detail</el-breadcrumb-item>\n</el-breadcrumb>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-breadcrumb",{attrs:{separator:"/"}},[t("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[s._v("homepage")]),t("el-breadcrumb-item",[s._v("promotion management")]),t("el-breadcrumb-item",[s._v("promotion list")]),t("el-breadcrumb-item",[s._v("promotion detail")])],1)],1),t("p",[s._v("In "),t("code",[s._v("el-breadcrumb")]),s._v(", each "),t("code",[s._v("el-breadcrumb-item")]),s._v(" is a tag that stands for every level starting from homepage. This component has a "),t("code",[s._v("String")]),s._v(" attribute "),t("code",[s._v("separator")]),s._v(", and it determines the separator. Its default value is '/'.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("separator")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"/"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":to")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v("\"{ path: '/' }\"")]),s._v(">")]),s._v("homepage"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion management"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion list"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion detail"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),s._m(4),s._m(5)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"breadcrumb"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"basic-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"breadcrumb-attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("separator")]),t("td",[s._v("separator character")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("/")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"breadcrumb-item-attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb Item Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("to")]),t("td",[s._v("target route of the link, same as "),t("code",{pre:!0},[s._v("to")]),s._v(" of "),t("code",{pre:!0},[s._v("vue-router")])]),t("td",[s._v("string/object")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("replace")]),t("td",[s._v("if "),t("code",{pre:!0},[s._v("true")]),s._v(", the navigation will not leave a history record")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])}],!1,null,null,null);t.default=a.exports},896:function(s,t,a){"use strict";a.r(t);a(731);a=a(0),a=Object(a.a)({},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("section",[s._m(0),t("p",[s._v("YufpWP uses a specific set of palettes to specify colors to provide a consistent look and feel for the products you build.")]),s._m(1),t("p",[s._v("The main color of YufpWP is bright and friendly blue.")]),t("el-row",{attrs:{gutter:12}},[t("el-col",{attrs:{span:8}},[t("div",{staticClass:"demo-color-box bg-blue-light"},[s._v("Light Blue"),t("div",{staticClass:"value"},[s._v("#58B7FF")])])]),t("el-col",{attrs:{span:8}},[t("div",{staticClass:"demo-color-box bg-blue"},[s._v("Blue"),t("div",{staticClass:"value"},[s._v("#20A0FF")])])]),t("el-col",{attrs:{span:8}},[t("div",{staticClass:"demo-color-box bg-blue-dark"},[s._v("Dark Blue"),t("div",{staticClass:"value"},[s._v("#1D8CE0")])])])],1),s._m(2),t("p",[s._v("Besides the main color, you need to use different scene colors in different scenarios (for example, dangerous color indicates dangerous operation)")]),t("el-row",{attrs:{gutter:12}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"demo-color-box bg-info"},[s._v("Blue"),t("div",{staticClass:"value"},[s._v("#20A0FF")])])]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"demo-color-box bg-success"},[s._v("Success"),t("div",{staticClass:"value"},[s._v("#13CE66")])])]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"demo-color-box bg-warning"},[s._v("Warning"),t("div",{staticClass:"value"},[s._v("#F7BA2A")])])]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"demo-color-box bg-danger"},[s._v("Danger"),t("div",{staticClass:"value"},[s._v("#FF4949")])])])],1),s._m(3),t("p",[s._v("Neutral colors are for text, background and border colors. You can use different neutral colors to represent the hierarchical structure.")]),t("el-row",{attrs:{gutter:12}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"demo-color-box-group"},[t("div",{staticClass:"demo-color-box bg-black"},[s._v("Black"),t("div",{staticClass:"value"},[s._v("#1F2D3D")])]),t("div",{staticClass:"demo-color-box bg-black-light"},[s._v("Light Black"),t("div",{staticClass:"value"},[s._v("#324057")])]),t("div",{staticClass:"demo-color-box bg-black-lighter"},[s._v("Extra Light Black"),t("div",{staticClass:"value"},[s._v("#475669")])])])]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"demo-color-box-group"},[t("div",{staticClass:"demo-color-box bg-silver"},[s._v("Silver"),t("div",{staticClass:"value"},[s._v("#8492A6")])]),t("div",{staticClass:"demo-color-box bg-silver-light"},[s._v("Light Silver"),t("div",{staticClass:"value"},[s._v("#99A9BF")])]),t("div",{staticClass:"demo-color-box bg-silver-lighter"},[s._v("Extra Light Silver"),t("div",{staticClass:"value"},[s._v("#C0CCDA")])])])]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"demo-color-box-group"},[t("div",{staticClass:"demo-color-box color-gray bg-gray"},[s._v("Gray"),t("div",{staticClass:"value"},[s._v("#D3DCE6")])]),t("div",{staticClass:"demo-color-box color-gray bg-gray-light"},[s._v("Light Gray"),t("div",{staticClass:"value"},[s._v("#E5E9F2")])]),t("div",{staticClass:"demo-color-box color-gray bg-gray-lighter"},[s._v("Extra Light Gray"),t("div",{staticClass:"value"},[s._v("#EFF2F7")])])])]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"demo-color-box-group",staticStyle:{border:"1px solid #e0e6ed","border-radius":"4px"}},[t("div",{staticClass:"demo-color-box color-gray bg-white-dark"},[s._v("Dark White"),t("div",{staticClass:"value"},[s._v("#F9FAFC")])]),t("div",{staticClass:"demo-color-box color-gray bg-white"},[s._v("White"),t("div",{staticClass:"value"},[s._v("#FFFFFF")])])])])],1)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"color"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#color","aria-hidden":"true"}},[this._v("¶")]),this._v(" Color")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"main-color"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#main-color","aria-hidden":"true"}},[this._v("¶")]),this._v(" Main Color")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"secondary-color"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#secondary-color","aria-hidden":"true"}},[this._v("¶")]),this._v(" Secondary Color")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"neutral-color"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#neutral-color","aria-hidden":"true"}},[this._v("¶")]),this._v(" Neutral Color")])}],!1,null,null,null);t.default=a.exports},897:function(s,t,a){"use strict";a.r(t);a=a(0),a=Object(a.a)({},function(){var s=this.$createElement;this._self._c;return this._m(0)},[function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("section",[t("h2",{attrs:{id:"custom-theme"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-theme","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom theme")]),t("p",[s._v("YufpWP uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea, and this is where our theme customization tools kick in.")]),t("h2",{attrs:{id:"changing-theme-color"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#changing-theme-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Changing theme color")]),t("p",[s._v("If you just want to change the theme color of YufpWP, the "),t("a",{attrs:{href:"https://YuwpUI.github.io/theme-preview/#/en-US"}},[s._v("theme preview website")]),s._v(" is recommended.")]),t("p",[s._v("The main color of YufpWP is bright and friendly blue. By changing it, you can make YufpWP more visually connected to specific projects.")]),t("p",[s._v("The above website enables you to preview theme of a new theme color in real-time, and it can generate a complete style package based on the new theme color for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' or 'Import component theme on demand' part of this section).")]),t("h2",{attrs:{id:"more-customizations"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#more-customizations","aria-hidden":"true"}},[s._v("¶")]),s._v(" More customizations")]),t("p",[s._v("If you need more customization than just changing the theme color, please follow these steps:")]),t("h3",{attrs:{id:"install-related-tool"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#install-related-tool","aria-hidden":"true"}},[s._v("¶")]),s._v(" Install related tool")]),t("p",[s._v("First install the theme generator globally or locally. Local install is recommended because in this way, when others clone your project, npm will automatically install it for them.")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-shell"}},[s._v("npm i element-theme -g\n")])]),t("p",[s._v("Then install the default theme from npm or GitHub.")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-shell"}},[t("span",{attrs:{class:"hljs-meta"}},[s._v("#")]),t("span",{attrs:{class:"bash"}},[s._v(" from npm")]),s._v("\nnpm i element-theme-default -D\n"),t("span",{attrs:{class:"hljs-meta"}},[s._v("\n#")]),t("span",{attrs:{class:"bash"}},[s._v(" from GitHub")]),s._v("\nnpm i https://github.com/YuwpUI/theme-default -D\n")])]),t("h3",{attrs:{id:"initialize-variable-file"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#initialize-variable-file","aria-hidden":"true"}},[s._v("¶")]),s._v(" Initialize variable file")]),t("p",[s._v("After successfully installing the above packages, a command named "),t("code",{pre:!0},[s._v("et")]),s._v(" is available in CLI (if the packages are installed locally, use "),t("code",{pre:!0},[s._v("node_modules/.bin/et")]),s._v(" instead). Run "),t("code",{pre:!0},[s._v("-i")]),s._v(" to initialize the variable file which outputs to "),t("code",{pre:!0},[s._v("element-variables.css")]),s._v(" by default. And you can specify its output directory as you will.")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-shell"}},[s._v("et -i [custom output file]\n"),t("span",{attrs:{class:"hljs-meta"}},[s._v("\n>")]),t("span",{attrs:{class:"bash"}},[s._v(" ✔ Generator variables file")]),s._v("\n")])]),t("p",[s._v("In "),t("code",{pre:!0},[s._v("element-variables.css")]),s._v(" you can find all the variables we used to style YufpWP and they are defined in CSS4 style:")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-css"}},[t("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":root")]),s._v(" {\n\n "),t("span",{attrs:{class:"hljs-comment"}},[s._v("/* Colors\n -------------------------- */")]),s._v("\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("--color-primary")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#20a0ff")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("--color-success")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#13ce66")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("--color-warning")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#f7ba2a")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("--color-danger")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#ff4949")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("--color-info")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#50BFFF")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("--color-blue")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#2e90fe")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("--color-blue-light")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#5da9ff")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("--color-blue-lighter")]),s._v(": "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("rgba")]),s._v("(var(--color-blue), "),t("span",{attrs:{class:"hljs-number"}},[s._v("0.12")]),s._v(");\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("--color-white")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#fff")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("--color-black")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#000")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("--color-grey")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#C0CCDA")]),s._v(";\n")])]),t("h3",{attrs:{id:"modify-variables"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#modify-variables","aria-hidden":"true"}},[s._v("¶")]),s._v(" Modify variables")]),t("p",[s._v("Just edit "),t("code",{pre:!0},[s._v("element-variables.css")]),s._v(", e.g. changing the theme color to red:")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-CSS"}},[t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("--color-primary")]),s._v(": "),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("red")]),s._v(";\n")])]),t("h3",{attrs:{id:"build-theme"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#build-theme","aria-hidden":"true"}},[s._v("¶")]),s._v(" Build theme")]),t("p",[s._v("After saving the variable file, use "),t("code",{pre:!0},[s._v("et")]),s._v(" to build your theme. You can activate "),t("code",{pre:!0},[s._v("watch")]),s._v(" mode by adding a parameter "),t("code",{pre:!0},[s._v("-w")]),s._v(". And if you customized the variable file's output, you need to add a parameter "),t("code",{pre:!0},[s._v("-c")]),s._v(" and variable file's name:")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-shell"}},[s._v("et\n"),t("span",{attrs:{class:"hljs-meta"}},[s._v("\n>")]),t("span",{attrs:{class:"bash"}},[s._v(" ✔ build theme font")]),s._v("\n"),t("span",{attrs:{class:"hljs-meta"}},[s._v(">")]),t("span",{attrs:{class:"bash"}},[s._v(" ✔ build element theme")]),s._v("\n")])]),t("h3",{attrs:{id:"import-custom-theme"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#import-custom-theme","aria-hidden":"true"}},[s._v("¶")]),s._v(" Import custom theme")]),t("p",[s._v("By default the build theme file is placed inside "),t("code",{pre:!0},[s._v("./theme")]),s._v(". You can specify its output directory with parameter "),t("code",{pre:!0},[s._v("-o")]),s._v(". Importing your own theme is just like importing the default theme, only this time you import the file you just built:")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-javascript"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'../theme/index.css'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" YuwpUI "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'yuwp-ui'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n\nVue.use(YuwpUI)\n")])]),t("h3",{attrs:{id:"import-component-theme-on-demand"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#import-component-theme-on-demand","aria-hidden":"true"}},[s._v("¶")]),s._v(" Import component theme on demand")]),t("p",[s._v("If you are using "),t("code",{pre:!0},[s._v("babel-plugin-component")]),s._v(" for on-demand import, just modify "),t("code",{pre:!0},[s._v(".babelrc")]),s._v(" and specify "),t("code",{pre:!0},[s._v("styleLibraryName")]),s._v(" to the path where your custom theme is located relative to "),t("code",{pre:!0},[s._v(".babelrc")]),s._v(". Note that "),t("code",{pre:!0},[s._v("~")]),s._v(" is required:")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-json"}},[s._v("{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"plugins"')]),s._v(": [["),t("span",{attrs:{class:"hljs-string"}},[s._v('"component"')]),s._v(", [\n {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"libraryName"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"yuwp-ui"')]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"styleLibraryName"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"~theme"')]),s._v("\n }\n ]]]\n}\n")])]),t("p",[s._v("If you are unfamiliar with "),t("code",{pre:!0},[s._v("babel-plugin-component")]),s._v(", please refer to "),t("a",{attrs:{href:"./#/en-US/component/quickstart"}},[s._v("Quick Start")]),s._v(". For more details, check out the "),t("a",{attrs:{href:"https://github.com/YuwpUI/element-theme"}},[s._v("project repository")]),s._v(" of "),t("code",{pre:!0},[s._v("element-theme")]),s._v(".")])])}],!1,null,null,null);t.default=a.exports},898:function(s,t,a){"use strict";a.r(t);a=a(0),a=Object(a.a)({},function(){var s=this.$createElement;this._self._c;return this._m(0)},[function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("section",[t("h2",{attrs:{id:"internationalization"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#internationalization","aria-hidden":"true"}},[s._v("¶")]),s._v(" Internationalization")]),t("p",[s._v("The default language of YufpWP is Chinese. If you wish to use another language, you'll need to do some i18n configuration. In your entry file, if you are importing YufpWP entirely:")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-javascript"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" YuwpUI "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'yuwp-ui'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" locale "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'yuwp-ui/lib/locale/lang/en'")]),s._v("\n\nVue.use(YuwpUI, { locale })\n")])]),t("p",[s._v("Or if you are importing YufpWP on demand:")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-javascript"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Button, Select } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'yuwp-ui'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" lang "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'yuwp-ui/lib/locale/lang/en'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" locale "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'yuwp-ui/lib/locale'")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-comment"}},[s._v("// configure language")]),s._v("\nlocale.use(lang)\n\n"),t("span",{attrs:{class:"hljs-comment"}},[s._v("// import components")]),s._v("\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n")])]),t("p",[s._v("The Chinese language pack is imported by default, even if you're using another language. But with "),t("code",{pre:!0},[s._v("NormalModuleReplacementPlugin")]),s._v(" provided by webpack you can replace default locale:")]),t("p",[s._v("webpack.config.js")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-javascript"}},[s._v("{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("plugins")]),s._v(": [\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" webpack.NormalModuleReplacementPlugin("),t("span",{attrs:{class:"hljs-regexp"}},[s._v("/yuwp-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'yuwp-ui/lib/locale/lang/en'")]),s._v(")\n ]\n}\n")])]),t("h2",{attrs:{id:"compatible-with-vue-i18n@5.x"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with-vue-i18n@5.x","aria-hidden":"true"}},[s._v("¶")]),s._v(" Compatible with "),t("code",{pre:!0},[s._v("vue-i18n@5.x")])]),t("p",[s._v("YufpWP is compatible with "),t("a",{attrs:{href:"https://github.com/kazupon/vue-i18n"}},[s._v("vue-i18n@5.x")]),s._v(", which makes multilingual switching even easier.")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-javascript"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" VueI18n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue-i18n'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" YufpWP "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'yuwp-ui'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" enLocale "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'yuwp-ui/lib/locale/lang/en'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" zhLocale "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'yuwp-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(VueI18n)\nVue.use(YufpWP)\n\nVue.config.lang = "),t("span",{attrs:{class:"hljs-string"}},[s._v("'zh-cn'")]),s._v("\nVue.locale("),t("span",{attrs:{class:"hljs-string"}},[s._v("'zh-cn'")]),s._v(", zhLocale)\nVue.locale("),t("span",{attrs:{class:"hljs-string"}},[s._v("'en'")]),s._v(", enLocale)\n")])]),t("h2",{attrs:{id:"compatible-with-other-i18n-plugins"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with-other-i18n-plugins","aria-hidden":"true"}},[s._v("¶")]),s._v(" Compatible with other i18n plugins")]),t("p",[s._v("YufpWP may not be compatible with i18n plugins other than vue-i18n, but you can customize how YufpWP processes i18n.")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-javascript"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" YufpWP "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'yuwp-ui'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" enLocale "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'yuwp-ui/lib/locale/lang/en'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" zhLocale "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'yuwp-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(YufpWP, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("i18n")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v(" ("),t("span",{attrs:{class:"hljs-params"}},[s._v("path, options")]),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n }\n})\n")])]),t("h2",{attrs:{id:"compatible-with-vue-i18n@6.x"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with-vue-i18n@6.x","aria-hidden":"true"}},[s._v("¶")]),s._v(" Compatible with "),t("code",{pre:!0},[s._v("vue-i18n@6.x")])]),t("p",[s._v("You need to manually handle it for compatibility with "),t("code",{pre:!0},[s._v("6.x")]),s._v(".")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-javascript"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" YufpWP "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'yuwp-ui'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" VueI18n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue-i18n'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" enLocale "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'yuwp-ui/lib/locale/lang/en'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" zhLocale "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'yuwp-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(VueI18n)\n\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" messages = {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("en")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'hello'")]),s._v(",\n ...enLocale "),t("span",{attrs:{class:"hljs-comment"}},[s._v("// Or use `Object.assign({ message: 'hello' }, enLocale)`")]),s._v("\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zh")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'你好'")]),s._v(",\n ...zhLocale "),t("span",{attrs:{class:"hljs-comment"}},[s._v("// Or use `Object.assign({ message: '你好' }, zhLocale)`")]),s._v("\n }\n}\n"),t("span",{attrs:{class:"hljs-comment"}},[s._v("// Create VueI18n instance with options")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" i18n = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" VueI18n({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("locale")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'en'")]),s._v(", "),t("span",{attrs:{class:"hljs-comment"}},[s._v("// set locale")]),s._v("\n messages, "),t("span",{attrs:{class:"hljs-comment"}},[s._v("// set locale messages")]),s._v("\n})\n\nVue.use(YufpWP, {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("i18n")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}},[s._v("key, value")]),s._v(") ")]),s._v("{ "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" i18n.t(key. value) }\n})\n\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Vue({ i18n }).$mount("),t("span",{attrs:{class:"hljs-string"}},[s._v("'#app'")]),s._v(")\n")])]),t("h2",{attrs:{id:"custom-i18n-in-on-demand-components"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-i18n-in-on-demand-components","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom i18n in on-demand components")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-js"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" DatePicker "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'element/lib/date-picker'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" VueI18n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue-i18n'")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" enLocale "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'yuwp-ui/lib/locale/lang/en'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" zhLocale "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'yuwp-ui/lib/locale/lang/zh-CN'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" ElementLocale "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'yuwp-ui/lib/locale'")]),s._v("\n\nVue.use(VueI18n)\nVue.use(DatePicker)\n\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" messages = {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("en")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'hello'")]),s._v(",\n ...enLocale\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("zh")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'你好'")]),s._v(",\n ...zhLocale\n }\n}\n"),t("span",{attrs:{class:"hljs-comment"}},[s._v("// Create VueI18n instance with options")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" i18n = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" VueI18n({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("locale")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'en'")]),s._v(", "),t("span",{attrs:{class:"hljs-comment"}},[s._v("// set locale")]),s._v("\n messages, "),t("span",{attrs:{class:"hljs-comment"}},[s._v("// set locale messages")]),s._v("\n})\n\nElementLocale.i18n("),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}},[s._v("key, value")]),s._v(") ")]),s._v("{ "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" i18n.t(key, value) })\n")])]),t("h2",{attrs:{id:"import-via-cdn"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#import-via-cdn","aria-hidden":"true"}},[s._v("¶")]),s._v(" Import via CDN")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/vue"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/yuwp-ui@1.4"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/yuwp-ui@1.4/lib/umd/locale/en.js"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n YufpWP.locale(YufpWP.lang.en)\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])]),t("p",[s._v("Compatible with "),t("code",{pre:!0},[s._v("vue-i18n")])]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/vue"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/vue-i18n/dist/vue-i18n.js"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/yuwp-ui@1.4"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/yuwp-ui@1.4/lib/umd/locale/zh-CN.js"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/yuwp-ui@1.4/lib/umd/locale/en.js"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"actionscript"}},[s._v("\n Vue.locale("),t("span",{attrs:{class:"hljs-string"}},[s._v("'en'")]),s._v(", YufpWP.lang.en)\n Vue.locale("),t("span",{attrs:{class:"hljs-string"}},[s._v("'zh-cn'")]),s._v(", YufpWP.lang.zhCN)\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])]),t("p",[s._v("Currently YufpWP ships with the following languages:")]),t("ul",{staticClass:"language-list"},[t("li",[s._v("Simplified Chinese (zh-CN)")]),t("li",[s._v("English (en)")]),t("li",[s._v("German (de)")]),t("li",[s._v("Portuguese (pt)")]),t("li",[s._v("Spanish (es)")]),t("li",[s._v("Danish (da)")]),t("li",[s._v("French (fr)")]),t("li",[s._v("Norwegian (nb-NO)")]),t("li",[s._v("Traditional Chinese (zh-TW)")]),t("li",[s._v("Italian (it)")]),t("li",[s._v("Korean (ko)")]),t("li",[s._v("Japanese (ja)")]),t("li",[s._v("Dutch (nl)")]),t("li",[s._v("Vietnamese (vi)")]),t("li",[s._v("Russian (ru-RU)")]),t("li",[s._v("Turkish (tr-TR)")]),t("li",[s._v("Brazilian Portuguese (pt-br)")]),t("li",[s._v("Farsi (fa)")]),t("li",[s._v("Thai (th)")]),t("li",[s._v("Indonesian (id)")]),t("li",[s._v("Bulgarian (bg)")]),t("li",[s._v("Polish (pl)")]),t("li",[s._v("Finnish (fi)")]),t("li",[s._v("Swedish (sv-SE)")]),t("li",[s._v("Greek (el)")]),t("li",[s._v("Slovak (sk)")]),t("li",[s._v("Catalunya (ca)")]),t("li",[s._v("Czech (cz)")]),t("li",[s._v("Ukrainian (ua)")]),t("li",[s._v("Turkmen (tk)")]),t("li",[s._v("Tamil (ta)")]),t("li",[s._v("Latvian (lv)")]),t("li",[s._v("Afrikaans (af-ZA)")]),t("li",[s._v("Estonian (ee)")]),t("li",[s._v("Slovenian (sl)")]),t("li",[s._v("Arabic (ar)")]),t("li",[s._v("Hebrew (he)")])]),t("p",[s._v("If your target language is not included, you are more than welcome to contribute: just add another language config "),t("a",{attrs:{href:"https://github.com/ElemeFE/element/tree/master/src/locale/lang"}},[s._v("here")]),s._v(" and create a pull request.")])])}],!1,null,null,null);t.default=a.exports},899:function(s,t,a){"use strict";a.r(t);a=a(0),a=Object(a.a)({},function(){var s=this.$createElement;this._self._c;return this._m(0)},[function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("section",[t("h2",{attrs:{id:"installation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#installation","aria-hidden":"true"}},[s._v("¶")]),s._v(" Installation")]),t("h3",{attrs:{id:"npm"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#npm","aria-hidden":"true"}},[s._v("¶")]),s._v(" npm")]),t("p",[s._v("Installing with npm is recommended and it works seamlessly with "),t("a",{attrs:{href:"https://webpack.js.org/"}},[s._v("webpack")]),s._v(".")]),t("div",{staticClass:"tip"},[t("p",[s._v("Note that this doc is for 1.x, so you need the "),t("code",{pre:!0},[s._v("legacy")]),s._v(" tag when installing.")])]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-shell"}},[s._v("npm i yuwp-ui@legacy -S\n")])]),t("h3",{attrs:{id:"cdn"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cdn","aria-hidden":"true"}},[s._v("¶")]),s._v(" CDN")]),t("p",[s._v("Get the latest version from "),t("a",{attrs:{href:"https://unpkg.com/yuwp-ui@1.4/"}},[s._v("unpkg.com/yuwp-ui")]),s._v(" , and import JavaScript and CSS file in your page.")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- import CSS --\x3e")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("link")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("rel")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"stylesheet"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("href")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://unpkg.com/yuwp-ui@1.4/lib/theme-default/index.css"')]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- import JavaScript --\x3e")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://unpkg.com/yuwp-ui@1.4/lib/index.js"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])]),t("div",{staticClass:"tip"},[t("p",[s._v("We recommend our users to lock YufpWP's version when using CDN. For example, if you're using YufpWP 1.4.8, you can lock CSS and JavaScript files like this: "),t("code",{pre:!0},[s._v("https://unpkg.com/yuwp-ui@1.4.8/lib/theme-default/index.css")]),s._v(", "),t("code",{pre:!0},[s._v("https://unpkg.com/yuwp-ui@1.4.8/lib/index.js")]),s._v(".")])]),t("h3",{attrs:{id:"hello-world"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hello-world","aria-hidden":"true"}},[s._v("¶")]),s._v(" Hello world")]),t("p",[s._v("If you are using CDN, a hello-world page is easy with YufpWP. "),t("a",{attrs:{href:"https://jsfiddle.net/hzfpyvg6/18/"}},[s._v("Online Demo")])]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-meta"}},[s._v("<!DOCTYPE "),t("span",{attrs:{class:"hljs-meta-keyword"}},[s._v("html")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("html")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("head")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("meta")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("charset")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"UTF-8"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- import CSS --\x3e")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("link")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("rel")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"stylesheet"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("href")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://unpkg.com/yuwp-ui@1.4/lib/theme-default/index.css"')]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("head")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("body")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"app"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"visible = true"')]),s._v(">")]),s._v("Button"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"visible"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"Hello world"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Try YufpWP"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("body")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- import Vue before YufpWP --\x3e")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://unpkg.com/vue@2.5/dist/vue.js"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- import JavaScript --\x3e")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://unpkg.com/yuwp-ui@1.4/lib/index.js"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"actionscript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Vue({\n el: "),t("span",{attrs:{class:"hljs-string"}},[s._v("'#app'")]),s._v(",\n data: "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),t("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" { visible: "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(" }\n }\n })\n ")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("html")]),s._v(">")]),s._v("\n")])]),t("p",[s._v("If you are using npm and wish to apply webpack, please continue to the next page: Quick Start.")])])}],!1,null,null,null);t.default=a.exports},900:function(s,t,a){"use strict";a.r(t);a(743);a=a(0),a=Object(a.a)({},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("section",[s._m(0),t("p",[s._v("Quickly and easily create layouts with the basic 24-column.")]),s._m(1),t("p",[s._v("Create basic grid layout using columns.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row>\n <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>\n</el-row>\n<el-row>\n <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n\n',script:null,style:"\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-row",[t("el-col",{attrs:{span:24}},[t("div",{staticClass:"grid-content bg-purple-dark"})])],1),t("el-row",[t("el-col",{attrs:{span:12}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:12}},[t("div",{staticClass:"grid-content bg-purple-light"})])],1),t("el-row",[t("el-col",{attrs:{span:8}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:8}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{span:8}},[t("div",{staticClass:"grid-content bg-purple"})])],1),t("el-row",[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple-light"})])],1),t("el-row",[t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple-light"})])],1)],1),t("p",[s._v("With "),t("code",[s._v("row")]),s._v(" and "),t("code",[s._v("col")]),s._v(", we can easily manipulate the layout using the "),t("code",[s._v("span")]),s._v(" attribute.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"24"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-dark"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Column spacing is supported.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row :gutter="20">\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n\n',script:null,style:"\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1)],1),t("p",[s._v("Row provides "),t("code",[s._v("gutter")]),s._v(" attribute to specify spacings between columns, and its default value is 0.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Form a more complex hybrid layout by combining the basic 1/24 columns.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row :gutter="20">\n <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n\n',script:null,style:"\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:16}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:8}},[t("div",{staticClass:"grid-content bg-purple"})])],1),t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:8}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:8}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple"})])],1),t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:16}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:4}},[t("div",{staticClass:"grid-content bg-purple"})])],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"16"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"16"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),t("p",[s._v("You can specify column offsets.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row :gutter="20">\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n\n',script:null,style:"\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1),t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:6,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1),t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:12,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1)],1),t("p",[s._v("You can specify the number of column offset by setting the value of "),t("code",[s._v("offset")]),s._v(" attribute of Col.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":offset")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":offset")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":offset")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":offset")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(5),t("p",[s._v("Use the flex layout to make flexible alignment of columns.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row type="flex" class="row-bg">\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="center">\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="end">\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-between">\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-around">\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n\n',script:null,style:"\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-row",{staticClass:"row-bg",attrs:{type:"flex"}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1),t("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"center"}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1),t("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"end"}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1),t("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-between"}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1),t("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-around"}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1)],1),t("p",[s._v("You can enable flex layout by setting "),t("code",[s._v("type")]),s._v(" attribute to 'flex', and define the layout of child elements by setting "),t("code",[s._v("justify")]),s._v(" attribute with start, center, end, space-between or space-around.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"flex"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"row-bg"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"flex"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"row-bg"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("justify")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"center"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"flex"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"row-bg"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("justify")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"end"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"flex"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"row-bg"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("justify")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"space-between"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"flex"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"row-bg"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("justify")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"space-around"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(6),t("p",[s._v("Taking example by Bootstrap's responsive design, four breakpoints are preset: xs, sm, md and lg.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row :gutter="10">\n <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col>\n <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col>\n <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n\n',script:null,style:"\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n"}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-row",{attrs:{gutter:10}},[t("el-col",{attrs:{xs:8,sm:6,md:4,lg:3}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{xs:4,sm:6,md:8,lg:9}},[t("div",{staticClass:"grid-content bg-purple-light"})]),t("el-col",{attrs:{xs:4,sm:6,md:8,lg:9}},[t("div",{staticClass:"grid-content bg-purple"})]),t("el-col",{attrs:{xs:8,sm:6,md:4,lg:3}},[t("div",{staticClass:"grid-content bg-purple-light"})])],1)],1),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":xs")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":sm")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":md")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":lg")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":xs")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":sm")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":md")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":lg")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"9"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":xs")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":sm")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":md")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":lg")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"9"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":xs")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":sm")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":md")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":lg")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),t("span",{attrs:{class:"css"}},[s._v("\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-col")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("4px")]),s._v(";\n }\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".bg-purple-dark")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("background")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#99a9bf")]),s._v(";\n }\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".bg-purple")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("background")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#d3dce6")]),s._v(";\n }\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".bg-purple-light")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("background")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#e5e9f2")]),s._v(";\n }\n "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".grid-content")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("4px")]),s._v(";\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("min-height")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("36px")]),s._v(";\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(7),s._m(8),s._m(9),s._m(10)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"layout"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#layout","aria-hidden":"true"}},[this._v("¶")]),this._v(" Layout")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"basic-layout"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-layout","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic layout")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"column-spacing"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#column-spacing","aria-hidden":"true"}},[this._v("¶")]),this._v(" Column spacing")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"hybrid-layout"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#hybrid-layout","aria-hidden":"true"}},[this._v("¶")]),this._v(" Hybrid layout")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"column-offset"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#column-offset","aria-hidden":"true"}},[this._v("¶")]),this._v(" Column offset")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"alignment"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#alignment","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alignment")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"responsive-layout"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#responsive-layout","aria-hidden":"true"}},[this._v("¶")]),this._v(" Responsive Layout")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"row-attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#row-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Row Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("gutter")]),t("td",[s._v("grid spacing")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("layout mode, you can use flex, works in modern browsers")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("justify")]),t("td",[s._v("horizontal alignment of flex layout")]),t("td",[s._v("string")]),t("td",[s._v("start/end/center/space-around/space-between")]),t("td",[s._v("start")])]),t("tr",[t("td",[s._v("align")]),t("td",[s._v("vertical alignment of flex layout")]),t("td",[s._v("string")]),t("td",[s._v("top/middle/bottom")]),t("td",[s._v("top")])]),t("tr",[t("td",[s._v("tag")]),t("td",[s._v("custom element tag")]),t("td",[s._v("string")]),t("td",[s._v("*")]),t("td",[s._v("div")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"col-attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#col-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Col Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("span")]),t("td",[s._v("number of column the grid spans")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("24")])]),t("tr",[t("td",[s._v("offset")]),t("td",[s._v("number of spacing on the left side of the grid")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("push")]),t("td",[s._v("number of columns that grid moves to the right")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("pull")]),t("td",[s._v("number of columns that grid moves to the left")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("xs")]),t("td",[t("code",{pre:!0},[s._v("<768px")]),s._v(" Responsive columns or column props object")]),t("td",[s._v("number/object (e.g. {span: 4, offset: 4})")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("sm")]),t("td",[t("code",{pre:!0},[s._v("≥768px")]),s._v(" Responsive columns or column props object")]),t("td",[s._v("number/object (e.g. {span: 4, offset: 4})")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("md")]),t("td",[t("code",{pre:!0},[s._v("≥992")]),s._v(" Responsive columns or column props object")]),t("td",[s._v("number/object (e.g. {span: 4, offset: 4})")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("lg")]),t("td",[t("code",{pre:!0},[s._v("≥1200")]),s._v(" Responsive columns or column props object")]),t("td",[s._v("number/object (e.g. {span: 4, offset: 4})")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("tag")]),t("td",[s._v("custom element tag")]),t("td",[s._v("string")]),t("td",[s._v("*")]),t("td",[s._v("div")])])])])}],!1,null,null,null);t.default=a.exports},901:function(s,t,a){"use strict";a.r(t);a=a(0),a=Object(a.a)({},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("section",[s._m(0),t("p",[s._v("Progress is used to show the progress of current operation, and inform the user the current status.")]),s._m(1),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-progress :percentage="0"></el-progress>\n<el-progress :percentage="70"></el-progress>\n<el-progress :percentage="100" status="success"></el-progress>\n<el-progress :percentage="50" status="exception"></el-progress>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-progress",{attrs:{percentage:0}}),t("el-progress",{attrs:{percentage:70}}),t("el-progress",{attrs:{percentage:100,status:"success"}}),t("el-progress",{attrs:{percentage:50,status:"exception"}})],1),t("p",[s._v("Use "),t("code",[s._v("percentage")]),s._v(" attribute to set the percentage. It's "),t("strong",[s._v("required")]),s._v(" and must be between "),t("code",[s._v("0-100")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"0"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"70"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"50"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"exception"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("In this case the percentage takes no additional space.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:0}}),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:70}}),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:100,status:"success"}}),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:50,status:"exception"}})],1),t("p",[t("code",[s._v("stroke-width")]),s._v(" attribute decides the "),t("code",[s._v("width")]),s._v(" of progress bar, and use "),t("code",[s._v("text-inside")]),s._v(" attribute to put description inside the progress bar.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":text-inside")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":stroke-width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"18"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"0"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":text-inside")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":stroke-width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"18"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"70"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":text-inside")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":stroke-width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"18"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":text-inside")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":stroke-width")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"18"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"50"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"exception"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-progress type="circle" :percentage="0"></el-progress>\n<el-progress type="circle" :percentage="25" custom-text="doing"></el-progress>\n<el-progress type="circle" :percentage="100" status="success"></el-progress>\n<el-progress type="circle" :percentage="50" status="exception"></el-progress>\n',script:null,style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[t("el-progress",{attrs:{type:"circle",percentage:0}}),t("el-progress",{attrs:{type:"circle",percentage:25,"custom-text":"doing"}}),t("el-progress",{attrs:{type:"circle",percentage:100,status:"success"}}),t("el-progress",{attrs:{type:"circle",percentage:50,status:"exception"}})],1),t("p",[s._v("You can specify "),t("code",[s._v("type")]),s._v(" attribute to "),t("code",[s._v("circle")]),s._v(" to use circular progress bar, and use "),t("code",[s._v("width")]),s._v(" attribute to change the size of circle.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"circle"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"0"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"circle"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"25"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("custom-text")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"doing"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"circle"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"circle"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"50"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"exception"')]),s._v(">")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5)],1)},[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"progress"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#progress","aria-hidden":"true"}},[this._v("¶")]),this._v(" Progress")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"linear-progress-bar-external-percentage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#linear-progress-bar-external-percentage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Linear progress bar (external percentage)")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"linear-progress-bar-internal-percentage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#linear-progress-bar-internal-percentage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Linear progress bar (internal percentage)")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"circular-progress-bar"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#circular-progress-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Circular progress bar")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[t("strong",[s._v("percentage")])]),t("td",[s._v("percentage, "),t("strong",[s._v("required")])]),t("td",[s._v("number")]),t("td",[s._v("0-100")]),t("td",[s._v("0")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("the type of progress bar")]),t("td",[s._v("string")]),t("td",[s._v("line/circle")]),t("td",[s._v("line")])]),t("tr",[t("td",[s._v("stroke-width")]),t("td",[s._v("the width of progress bar")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("6")])]),t("tr",[t("td",[s._v("text-inside")]),t("td",[s._v("whether to place the percentage inside progress bar, only works when "),t("code",{pre:!0},[s._v("type")]),s._v(" is 'line'")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("status")]),t("td",[s._v("the current status of progress bar")]),t("td",[s._v("string")]),t("td",[s._v("success/exception")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("width")]),t("td",[s._v("the canvas width of circle progress bar")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("126")])]),t("tr",[t("td",[s._v("show-text")]),t("td",[s._v("whether to show percentage")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("custom-text")]),t("td",[s._v("custom text content (available only at type=circle)")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])}],!1,null,null,null);t.default=a.exports},902:function(s,t,a){"use strict";a.r(t);a=a(0),a=Object(a.a)({},function(){var s=this.$createElement;this._self._c;return this._m(0)},[function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("section",[t("h2",{attrs:{id:"quick-start"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#quick-start","aria-hidden":"true"}},[s._v("¶")]),s._v(" Quick start")]),t("p",[s._v("This part walks you through the process of using YufpWP in a webpack project.")]),t("h3",{attrs:{id:"use-starter-kit"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#use-starter-kit","aria-hidden":"true"}},[s._v("¶")]),s._v(" Use Starter Kit")]),t("p",[s._v("We provide a general "),t("a",{attrs:{href:"https://github.com/YuwpUI/element-starter/tree/1.x"}},[s._v("project template")]),s._v(" for you. For those who are familiar with "),t("a",{attrs:{href:"https://github.com/YuwpUI/element-cooking-starter"}},[s._v("cooking")]),s._v(" or "),t("a",{attrs:{href:"https://github.com/YuwpUI/element-in-laravel-starter/tree/1.x"}},[s._v("Laravel")]),s._v(", we also provide corresponding templates, and you can download and use them as well.")]),t("p",[s._v("If you prefer not to use them, please read the following.")]),t("h3",{attrs:{id:"config-files"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#config-files","aria-hidden":"true"}},[s._v("¶")]),s._v(" Config files")]),t("p",[s._v("Create a new project, and its structure should be")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-text"}},[s._v("|- src/ --------------------- source code\n |- App.vue\n |- main.js -------------- entry\n|- .babelrc ----------------- babel config\n|- index.html --------------- HTML template\n|- package.json ------------- npm config\n|- README.md ---------------- readme\n|- webpack.config.js -------- webpack config\n")])]),t("p",[s._v("Typical configurations for these config files are:")]),t("p",[t("strong",[s._v(".babelrc")])]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-json"}},[s._v("{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"presets"')]),s._v(": ["),t("span",{attrs:{class:"hljs-string"}},[s._v('"vue-app"')]),s._v("]\n}\n")])]),t("br"),t("p",[t("strong",[s._v("package.json")])]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-json"}},[s._v("{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"name"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"element-starter"')]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"scripts"')]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"dev"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"cross-env NODE_ENV=development webpack-dev-server --inline --hot --port 8086"')]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"build"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"cross-env NODE_ENV=production webpack --progress --hide-modules"')]),s._v("\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"dependencies"')]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"yuwp-ui"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"legacy"')]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"vue"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"2.5.2"')]),s._v("\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"devDependencies"')]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"babel-core"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"^6.0.0"')]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"babel-loader"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"^6.0.0"')]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"babel-preset-vue-app"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"^1.2.0"')]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"cross-env"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"^1.0.6"')]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"css-loader"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"^0.23.1"')]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"file-loader"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"^0.8.5"')]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"style-loader"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"^0.13.1"')]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"vue-loader"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"^9.8.0"')]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"webpack"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"beta"')]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"webpack-dev-server"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"beta"')]),s._v("\n }\n}\n")])]),t("br"),t("p",[t("strong",[s._v("webpack.config.js")])]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-javascript"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" path = "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("require")]),s._v("("),t("span",{attrs:{class:"hljs-string"}},[s._v("'path'")]),s._v(")\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" webpack = "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("require")]),s._v("("),t("span",{attrs:{class:"hljs-string"}},[s._v("'webpack'")]),s._v(")\n\n"),t("span",{attrs:{class:"hljs-built_in"}},[s._v("module")]),s._v(".exports = {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("entry")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'./src/main.js'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("output")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("path")]),s._v(": path.resolve(__dirname, "),t("span",{attrs:{class:"hljs-string"}},[s._v("'./dist'")]),s._v("),\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("publicPath")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'/dist/'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("filename")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'build.js'")]),s._v("\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("module")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("loaders")]),s._v(": [\n {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("test")]),s._v(": "),t("span",{attrs:{class:"hljs-regexp"}},[s._v("/\\.vue$/")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("loader")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue-loader'")]),s._v("\n },\n {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("test")]),s._v(": "),t("span",{attrs:{class:"hljs-regexp"}},[s._v("/\\.js$/")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("loader")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'babel-loader'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("exclude")]),s._v(": "),t("span",{attrs:{class:"hljs-regexp"}},[s._v("/node_modules/")]),s._v("\n },\n {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("test")]),s._v(": "),t("span",{attrs:{class:"hljs-regexp"}},[s._v("/\\.css$/")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("loader")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'style-loader!css-loader'")]),s._v("\n },\n {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("test")]),s._v(": "),t("span",{attrs:{class:"hljs-regexp"}},[s._v("/\\.(eot|svg|ttf|woff|woff2)(\\?\\S*)?$/")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("loader")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'file-loader'")]),s._v("\n },\n {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("test")]),s._v(": "),t("span",{attrs:{class:"hljs-regexp"}},[s._v("/\\.(png|jpe?g|gif|svg)(\\?\\S*)?$/")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("loader")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'file-loader'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("query")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'[name].[ext]?[hash]'")]),s._v("\n }\n }\n ]\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("devServer")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("historyApiFallback")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("noInfo")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("devtool")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'#eval-source-map'")]),s._v("\n}\n\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (process.env.NODE_ENV === "),t("span",{attrs:{class:"hljs-string"}},[s._v("'production'")]),s._v(") {\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("module")]),s._v(".exports.devtool = "),t("span",{attrs:{class:"hljs-string"}},[s._v("'#source-map'")]),s._v("\n "),t("span",{attrs:{class:"hljs-comment"}},[s._v("// http://vue-loader.vuejs.org/en/workflow/production.html")]),s._v("\n "),t("span",{attrs:{class:"hljs-built_in"}},[s._v("module")]),s._v(".exports.plugins = ("),t("span",{attrs:{class:"hljs-built_in"}},[s._v("module")]),s._v(".exports.plugins || []).concat([\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" webpack.DefinePlugin({\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'process.env'")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("NODE_ENV")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'\"production\"'")]),s._v("\n }\n }),\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" webpack.optimize.UglifyJsPlugin({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("compress")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("warnings")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n }\n })\n ])\n}\n")])]),t("h3",{attrs:{id:"import-yufpwp"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#import-yufpwp","aria-hidden":"true"}},[s._v("¶")]),s._v(" Import YufpWP")]),t("p",[s._v("You can import YufpWP entirely, or just import what you need. Let's start with fully import.")]),t("h4",{attrs:{id:"fully-import"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fully-import","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fully import")]),t("p",[s._v("In main.js:")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-javascript"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" YuwpUI "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'yuwp-ui'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'yuwp-ui/lib/theme-default/index.css'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" App "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'./App.vue'")]),s._v("\n\nVue.use(YuwpUI)\n\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Vue({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("el")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'#app'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("render")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v(" ("),t("span",{attrs:{class:"hljs-params"}},[s._v("h")]),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" h(App);\n }\n})\n")])]),t("p",[s._v("The above imports YufpWP entirely. Note that CSS file needs to be imported separately.")]),t("h4",{attrs:{id:"on-demand"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#on-demand","aria-hidden":"true"}},[s._v("¶")]),s._v(" On demand")]),t("p",[s._v("With the help of "),t("a",{attrs:{href:"https://github.com/QingWei-Li/babel-plugin-component"}},[s._v("babel-plugin-component")]),s._v(", we can import components we actually need, making the project smaller than otherwise.")]),t("p",[s._v("First, install babel-plugin-component:")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-bash"}},[s._v("npm install babel-plugin-component -D\n")])]),t("p",[s._v("Then edit .babelrc:")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-json"}},[s._v("{\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"presets"')]),s._v(": [\n ["),t("span",{attrs:{class:"hljs-string"}},[s._v('"es2015"')]),s._v(", { "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"modules"')]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(" }]\n ],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"plugins"')]),s._v(": [["),t("span",{attrs:{class:"hljs-string"}},[s._v('"component"')]),s._v(", [\n {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"libraryName"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"yuwp-ui"')]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v('"styleLibraryName"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"theme-default"')]),s._v("\n }\n ]]]\n}\n")])]),t("p",[s._v("Next, if you need Button and Select, edit main.js:")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-javascript"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Button, Select } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'yuwp-ui'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" App "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'./App.vue'")]),s._v("\n\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n"),t("span",{attrs:{class:"hljs-comment"}},[s._v("/* or\n * Vue.use(Button)\n * Vue.use(Select)\n */")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Vue({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("el")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'#app'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("render")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v(" ("),t("span",{attrs:{class:"hljs-params"}},[s._v("h")]),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" h(App);\n }\n})\n")])]),t("p",[s._v("Full example (Component list reference "),t("a",{attrs:{href:"https://github.com/ElemeFE/element/blob/dev/components.json"}},[s._v("components.json")]),s._v(")")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-javascript"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" {\n Pagination,\n Dialog,\n Autocomplete,\n Dropdown,\n DropdownMenu,\n DropdownItem,\n Menu,\n Submenu,\n MenuItem,\n MenuItemGroup,\n Input,\n InputNumber,\n Radio,\n RadioGroup,\n RadioButton,\n Checkbox,\n CheckboxGroup,\n Switch,\n Select,\n Option,\n OptionGroup,\n Button,\n ButtonGroup,\n Table,\n TableColumn,\n DatePicker,\n TimeSelect,\n TimePicker,\n Popover,\n Tooltip,\n Breadcrumb,\n BreadcrumbItem,\n Form,\n FormItem,\n Tabs,\n TabPane,\n Tag,\n Tree,\n Alert,\n Slider,\n Icon,\n Row,\n Col,\n Upload,\n Progress,\n Spinner,\n Badge,\n Card,\n Rate,\n Steps,\n Step,\n Carousel,\n Scrollbar,\n CarouselItem,\n Collapse,\n CollapseItem,\n Cascader,\n ColorPicker,\n Loading,\n MessageBox,\n Message,\n Notification\n} "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'yuwp-ui'")]),s._v("\n\nVue.use(Pagination)\nVue.use(Dialog)\nVue.use(Autocomplete)\nVue.use(Dropdown)\nVue.use(DropdownMenu)\nVue.use(DropdownItem)\nVue.use(Menu)\nVue.use(Submenu)\nVue.use(MenuItem)\nVue.use(MenuItemGroup)\nVue.use(Input)\nVue.use(InputNumber)\nVue.use(Radio)\nVue.use(RadioGroup)\nVue.use(RadioButton)\nVue.use(Checkbox)\nVue.use(CheckboxGroup)\nVue.use(Switch)\nVue.use(Select)\nVue.use(Option)\nVue.use(OptionGroup)\nVue.use(Button)\nVue.use(ButtonGroup)\nVue.use(Table)\nVue.use(TableColumn)\nVue.use(DatePicker)\nVue.use(TimeSelect)\nVue.use(TimePicker)\nVue.use(Popover)\nVue.use(Tooltip)\nVue.use(Breadcrumb)\nVue.use(BreadcrumbItem)\nVue.use(Form)\nVue.use(FormItem)\nVue.use(Tabs)\nVue.use(TabPane)\nVue.use(Tag)\nVue.use(Tree)\nVue.use(Alert)\nVue.use(Slider)\nVue.use(Icon)\nVue.use(Row)\nVue.use(Col)\nVue.use(Upload)\nVue.use(Progress)\nVue.use(Spinner)\nVue.use(Badge)\nVue.use(Card)\nVue.use(Rate)\nVue.use(Steps)\nVue.use(Step)\nVue.use(Carousel)\nVue.use(Scrollbar)\nVue.use(CarouselItem)\nVue.use(Collapse)\nVue.use(CollapseItem)\nVue.use(Cascader)\nVue.use(ColorPicker)\n\nVue.use(Loading.directive)\n\nVue.prototype.$loading = Loading.service\nVue.prototype.$msgbox = MessageBox\nVue.prototype.$alert = MessageBox.alert\nVue.prototype.$confirm = MessageBox.confirm\nVue.prototype.$prompt = MessageBox.prompt\nVue.prototype.$notify = Notification\nVue.prototype.$message = Message\n")])]),t("h3",{attrs:{id:"start-coding"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#start-coding","aria-hidden":"true"}},[s._v("¶")]),s._v(" Start coding")]),t("p",[s._v("Now you have implemented Vue and YufpWP to your project, and it's time to write your code. Start development mode:")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-bash"}},[t("span",{attrs:{class:"hljs-comment"}},[s._v("# visit localhost:8086")]),s._v("\nnpm run dev\n")])]),t("p",[s._v("Build:")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-bash"}},[s._v("npm run build\n")])]),t("p",[s._v("Please refer to each component's documentation to learn how to use them.")])])}],!1,null,null,null);t.default=a.exports},903:function(s,t,a){"use strict";a.r(t);a(762);a=a(0),a=Object(a.a)({},function(){var s=this.$createElement;this._self._c;return this._m(0)},[function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("section",[t("h2",{attrs:{id:"typography"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#typography","aria-hidden":"true"}},[s._v("¶")]),s._v(" Typography")]),t("p",[s._v("We create a font convention to ensure the best presentation across different platforms.")]),t("h3",{attrs:{id:"chinese-font"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chinese-font","aria-hidden":"true"}},[s._v("¶")]),s._v(" Chinese Font")]),t("div",{staticClass:"demo-typo-box typo-PingFang"},[s._v("\n 和畅惠风\n "),t("div",{staticClass:"name"},[s._v("PingFang SC")])]),t("div",{staticClass:"demo-typo-box typo-Hiragino"},[s._v("\n 和畅惠风\n "),t("div",{staticClass:"name"},[s._v("Hiragino Sans GB")])]),t("div",{staticClass:"demo-typo-box typo-Microsoft"},[s._v("\n 和畅惠风\n "),t("div",{staticClass:"name"},[s._v("Microsoft YaHei")])]),t("h3",{attrs:{id:"english-numberic-font"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#english-numberic-font","aria-hidden":"true"}},[s._v("¶")]),s._v(" English / Numberic Font")]),t("div",{staticClass:"demo-typo-box typo-Helvetica-neue"},[s._v("\n RGag\n "),t("div",{staticClass:"name"},[s._v("Helvetica Neue")])]),t("div",{staticClass:"demo-typo-box typo-Helvetica"},[s._v("\n RGag\n "),t("div",{staticClass:"name"},[s._v("Helvetica")])]),t("div",{staticClass:"demo-typo-box typo-Arial"},[s._v("\n RGag\n "),t("div",{staticClass:"name"},[s._v("Arial")])]),t("h3",{attrs:{id:"font-family"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-family","aria-hidden":"true"}},[s._v("¶")]),s._v(" Font-family")]),t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-css"}},[t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("font-family")]),s._v(': "'),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("Helvetica")]),s._v(" "),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("Neue")]),s._v('",'),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("Helvetica")]),s._v(',"'),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("PingFang")]),s._v(" "),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("SC")]),s._v('","'),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("Hiragino")]),s._v(" "),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("Sans")]),s._v(" "),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("GB")]),s._v('","'),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("Microsoft")]),s._v(" "),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("YaHei")]),s._v('","微软雅黑",'),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("Arial")]),s._v(","),t("span",{attrs:{class:"hljs-selector-tag"}},[s._v("sans-serif")]),s._v(";\n")])]),t("h3",{attrs:{id:"font-convention"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-convention","aria-hidden":"true"}},[s._v("¶")]),s._v(" Font Convention")]),t("table",{staticClass:"demo-typo-size"},[t("tbody",[t("tr",[t("td",{staticClass:"h1"},[s._v("Main Title")]),t("td",{staticClass:"h1"},[s._v("Build with Element")]),t("td",{staticClass:"color-dark-light"},[s._v("20px Extra large")])]),t("tr",[t("td",{staticClass:"h2"},[s._v("Title")]),t("td",{staticClass:"h2"},[s._v("Build with Element")]),t("td",{staticClass:"color-dark-light"},[s._v("18px large")])]),t("tr",[t("td",{staticClass:"h3"},[s._v("Small Title")]),t("td",{staticClass:"h3"},[s._v("Build with Element")]),t("td",{staticClass:"color-dark-light"},[s._v("16px Medium")])]),t("tr",[t("td",{staticClass:"text-regular"},[s._v("Body")]),t("td",{staticClass:"text-regular"},[s._v("Build with Element")]),t("td",{staticClass:"color-dark-light"},[s._v("14px Small")])]),t("tr",[t("td",{staticClass:"text-small"},[s._v("Body (small)")]),t("td",{staticClass:"text-small"},[s._v("Build with Element")]),t("td",{staticClass:"color-dark-light"},[s._v("13px Extra Small")])]),t("tr",[t("td",{staticClass:"text-smaller"},[s._v("Supplementary text")]),t("td",{staticClass:"text-smaller"},[s._v("Build with Element")]),t("td",{staticClass:"color-dark-light"},[s._v("12px Extra Extra Small")])])])])])}],!1,null,null,null);t.default=a.exports},920:function(s,t,a){"use strict";a.d(t,"a",function(){return l}),a.d(t,"b",function(){return n});var l=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("section",[t._m(0),a("p",[t._v("A group of options for multiple choices.")]),t._m(1),a("p",[t._v("Checkbox can be used alone to switch between two states.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n \x3c!-- `checked` should be true or false --\x3e\n <el-checkbox v-model="checked">Option</el-checkbox>\n</template>\n\n',script:"\n export default {\n data() {\n return {\n checked: true\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-checkbox",{model:{value:t.checked,callback:function(s){t.checked=s},expression:"checked"}},[t._v("Option")])]],2),a("p",[t._v("Define "),a("code",[t._v("v-model")]),t._v("(bind variable) in "),a("code",[t._v("el-checkbox")]),t._v(". The default value is a "),a("code",[t._v("Boolean")]),t._v(" for single "),a("code",[t._v("checkbox")]),t._v(", and it becomes "),a("code",[t._v("true")]),t._v(" when selected. Content inside the "),a("code",[t._v("el-checkbox")]),t._v(" tag will become the description following the button of the checkbox.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-comment"}},[t._v("\x3c!-- `checked` should be true or false --\x3e")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"checked"')]),t._v(">")]),t._v("Option"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox")]),t._v(">")]),t._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),a("span",{attrs:{class:"javascript"}},[t._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("checked")]),t._v(": "),a("span",{attrs:{class:"hljs-literal"}},[t._v("true")]),t._v("\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(2),a("p",[t._v("Disabled state for checkbox.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-checkbox v-model="checked1" disabled>Option</el-checkbox>\n <el-checkbox v-model="checked2" disabled>Option</el-checkbox>\n</template>\n\n',script:"\n export default {\n data() {\n return {\n checked1: false,\n checked2: true\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-checkbox",{attrs:{disabled:""},model:{value:t.checked1,callback:function(s){t.checked1=s},expression:"checked1"}},[t._v("Option")]),a("el-checkbox",{attrs:{disabled:""},model:{value:t.checked2,callback:function(s){t.checked2=s},expression:"checked2"}},[t._v("Option")])]],2),a("p",[t._v("Set the "),a("code",[t._v("disabled")]),t._v(" attribute.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"checked1"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("disabled")]),t._v(">")]),t._v("Option"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"checked2"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("disabled")]),t._v(">")]),t._v("Option"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox")]),t._v(">")]),t._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),a("span",{attrs:{class:"javascript"}},[t._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("checked1")]),t._v(": "),a("span",{attrs:{class:"hljs-literal"}},[t._v("false")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("checked2")]),t._v(": "),a("span",{attrs:{class:"hljs-literal"}},[t._v("true")]),t._v("\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(3),a("p",[t._v("It is used for multiple checkboxes which are bound in one group, and indicates whether one option is selected by checking if it is checked.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-checkbox-group v-model="checkList">\n <el-checkbox label="Option A"></el-checkbox>\n <el-checkbox label="Option B"></el-checkbox>\n <el-checkbox label="Option C"></el-checkbox>\n <el-checkbox label="disabled" disabled></el-checkbox>\n <el-checkbox label="selected and disabled" disabled></el-checkbox>\n </el-checkbox-group>\n</template>\n\n\n',script:"\n export default {\n data () {\n return {\n checkList: ['selected and disabled','Option A']\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-checkbox-group",{model:{value:t.checkList,callback:function(s){t.checkList=s},expression:"checkList"}},[a("el-checkbox",{attrs:{label:"Option A"}}),a("el-checkbox",{attrs:{label:"Option B"}}),a("el-checkbox",{attrs:{label:"Option C"}}),a("el-checkbox",{attrs:{label:"disabled",disabled:""}}),a("el-checkbox",{attrs:{label:"selected and disabled",disabled:""}})],1)]],2),a("p",[a("code",[t._v("checkbox-group")]),t._v(" element can manage multiple checkboxes in one group by using "),a("code",[t._v("v-model")]),t._v(" which is bound as an "),a("code",[t._v("Array")]),t._v(". Inside the "),a("code",[t._v("el-checkbox")]),t._v(" element, "),a("code",[t._v("label")]),t._v(" is the value of the checkbox. If no content is nested in that tag, "),a("code",[t._v("label")]),t._v(" will be rendered as the description following the button of the checkbox. "),a("code",[t._v("label")]),t._v(" also corresponds with the element values in the array. It is selected if the specified value exists in the array, and vice versa.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox-group")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"checkList"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"Option A"')]),t._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"Option B"')]),t._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"Option C"')]),t._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"disabled"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("disabled")]),t._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"selected and disabled"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("disabled")]),t._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox-group")]),t._v(">")]),t._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),a("span",{attrs:{class:"javascript"}},[t._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n data () {\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("checkList")]),t._v(": ["),a("span",{attrs:{class:"hljs-string"}},[t._v("'selected and disabled'")]),t._v(","),a("span",{attrs:{class:"hljs-string"}},[t._v("'Option A'")]),t._v("]\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(4),t._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Check all</el-checkbox>\n <div style="margin: 15px 0;"></div>\n <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">\n <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>\n </el-checkbox-group>\n</template>\n\n',script:"\n var cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n export default {\n data() {\n return {\n checkAll: true,\n checkedCities: ['Shanghai', 'Beijing'],\n cities: cityOptions,\n isIndeterminate: true\n };\n },\n methods: {\n handleCheckAllChange: function(event) {\n this.checkedCities = event.target.checked ? cityOptions : [];\n this.isIndeterminate = false;\n },\n handleCheckedCitiesChange: function(value) {\n var checkedCount = value.length;\n this.checkAll = checkedCount === this.cities.length;\n this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-checkbox",{attrs:{indeterminate:t.isIndeterminate},on:{change:t.handleCheckAllChange},model:{value:t.checkAll,callback:function(s){t.checkAll=s},expression:"checkAll"}},[t._v("Check all")]),a("div",{staticStyle:{margin:"15px 0"}}),a("el-checkbox-group",{on:{change:t.handleCheckedCitiesChange},model:{value:t.checkedCities,callback:function(s){t.checkedCities=s},expression:"checkedCities"}},t._l(t.cities,function(s){return a("el-checkbox",{key:s,attrs:{label:s}},[t._v(t._s(s))])}))]],2),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":indeterminate")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"isIndeterminate"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"checkAll"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("@change")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"handleCheckAllChange"')]),t._v(">")]),t._v("Check all"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("style")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"margin: 15px 0;"')]),t._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox-group")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"checkedCities"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("@change")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"handleCheckedCitiesChange"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-for")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"city in cities"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":label")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"city"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":key")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"city"')]),t._v(">")]),t._v("{{city}}"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox-group")]),t._v(">")]),t._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),a("span",{attrs:{class:"javascript"}},[t._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" cityOptions = ["),a("span",{attrs:{class:"hljs-string"}},[t._v("'Shanghai'")]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Beijing'")]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Guangzhou'")]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Shenzhen'")]),t._v("];\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("checkAll")]),t._v(": "),a("span",{attrs:{class:"hljs-literal"}},[t._v("true")]),t._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("checkedCities")]),t._v(": ["),a("span",{attrs:{class:"hljs-string"}},[t._v("'Shanghai'")]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Beijing'")]),t._v("],\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("cities")]),t._v(": cityOptions,\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("isIndeterminate")]),t._v(": "),a("span",{attrs:{class:"hljs-literal"}},[t._v("true")]),t._v("\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("methods")]),t._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("handleCheckAllChange")]),t._v(": "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),a("span",{attrs:{class:"hljs-params"}},[t._v("event")]),t._v(") ")]),t._v("{\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".checkedCities = event.target.checked ? cityOptions : [];\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".isIndeterminate = "),a("span",{attrs:{class:"hljs-literal"}},[t._v("false")]),t._v(";\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("handleCheckedCitiesChange")]),t._v(": "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),a("span",{attrs:{class:"hljs-params"}},[t._v("value")]),t._v(") ")]),t._v("{\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" checkedCount = value.length;\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".checkAll = checkedCount === "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".cities.length;\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".isIndeterminate = checkedCount > "),a("span",{attrs:{class:"hljs-number"}},[t._v("0")]),t._v(" && checkedCount < "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".cities.length;\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(6),t._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-checkbox-group v-model="checkedCities1" :min="1" :max="2">\n <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>\n </el-checkbox-group>\n</template>\n\n',script:"\n var cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n export default {\n data: function() {\n return {\n checkedCities1: ['Shanghai', 'Beijing'],\n cities: cityOptions\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-checkbox-group",{attrs:{min:1,max:2},model:{value:t.checkedCities1,callback:function(s){t.checkedCities1=s},expression:"checkedCities1"}},t._l(t.cities,function(s){return a("el-checkbox",{key:s,attrs:{label:s}},[t._v(t._s(s))])}))]],2),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox-group")]),t._v(" \n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"checkedCities1"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":min")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"1"')]),t._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":max")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"2"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-for")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"city in cities"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":label")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"city"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":key")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"city"')]),t._v(">")]),t._v("{{city}}"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox-group")]),t._v(">")]),t._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),a("span",{attrs:{class:"javascript"}},[t._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" cityOptions = ["),a("span",{attrs:{class:"hljs-string"}},[t._v("'Shanghai'")]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Beijing'")]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Guangzhou'")]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Shenzhen'")]),t._v("];\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),a("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("checkedCities1")]),t._v(": ["),a("span",{attrs:{class:"hljs-string"}},[t._v("'Shanghai'")]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Beijing'")]),t._v("],\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("cities")]),t._v(": cityOptions\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(8),a("p",[t._v("Checkbox with button styles.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div style="margin: 15px 0;"></div>\n <el-checkbox-group v-model="checkboxGroup1">\n <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n </el-checkbox-group>\n <div style="margin: 15px 0;"></div>\n <el-checkbox-group v-model="checkboxGroup2" size="small">\n <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === \'Shenzhen\'" :key="city">{{city}}</el-checkbox-button>\n </el-checkbox-group>\n <div style="margin: 15px 0;"></div>\n <el-checkbox-group v-model="checkboxGroup3" size="large" fill="#324057" text-color="#a4aebd" :min="1" :max="3">\n <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n </el-checkbox-group>\n</template>\n\n',script:"\n var cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n\n export default {\n data: function() {\n return {\n checkboxGroup1: ['Shanghai'],\n checkboxGroup2: ['Beijing'],\n checkboxGroup3: ['Guangzhou'],\n cities: cityOptions\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticStyle:{margin:"15px 0"}}),a("el-checkbox-group",{model:{value:t.checkboxGroup1,callback:function(s){t.checkboxGroup1=s},expression:"checkboxGroup1"}},t._l(t.cities,function(s){return a("el-checkbox-button",{key:s,attrs:{label:s}},[t._v(t._s(s))])})),a("div",{staticStyle:{margin:"15px 0"}}),a("el-checkbox-group",{attrs:{size:"small"},model:{value:t.checkboxGroup2,callback:function(s){t.checkboxGroup2=s},expression:"checkboxGroup2"}},t._l(t.cities,function(s){return a("el-checkbox-button",{key:s,attrs:{label:s,disabled:"Shenzhen"===s}},[t._v(t._s(s))])})),a("div",{staticStyle:{margin:"15px 0"}}),a("el-checkbox-group",{attrs:{size:"large",fill:"#324057","text-color":"#a4aebd",min:1,max:3},model:{value:t.checkboxGroup3,callback:function(s){t.checkboxGroup3=s},expression:"checkboxGroup3"}},t._l(t.cities,function(s){return a("el-checkbox-button",{key:s,attrs:{label:s}},[t._v(t._s(s))])}))]],2),a("p",[t._v("You just need to change "),a("code",[t._v("<el-checkbox>")]),t._v(" element into "),a("code",[t._v("<el-checkbox-button>")]),t._v(" element. We also provide "),a("code",[t._v("size")]),t._v(" attribute for these buttons: "),a("code",[t._v("large")]),t._v(" and "),a("code",[t._v("small")]),t._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("style")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"margin: 15px 0;"')]),t._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox-group")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"checkboxGroup1"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox-button")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-for")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"city in cities"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":label")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"city"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":key")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"city"')]),t._v(">")]),t._v("{{city}}"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox-button")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox-group")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("style")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"margin: 15px 0;"')]),t._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox-group")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"checkboxGroup2"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("size")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"small"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox-button")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-for")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"city in cities"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":label")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"city"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":disabled")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v("\"city === 'Shenzhen'\"")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":key")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"city"')]),t._v(">")]),t._v("{{city}}"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox-button")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox-group")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("style")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"margin: 15px 0;"')]),t._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox-group")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"checkboxGroup3"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("size")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"large"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("fill")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"#324057"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("text-color")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"#a4aebd"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":min")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"1"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":max")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"3"')]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox-button")]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v("v-for")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"city in cities"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":label")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"city"')]),t._v(" "),a("span",{attrs:{class:"hljs-attr"}},[t._v(":key")]),t._v("="),a("span",{attrs:{class:"hljs-string"}},[t._v('"city"')]),t._v(">")]),t._v("{{city}}"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox-button")]),t._v(">")]),t._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("el-checkbox-group")]),t._v(">")]),t._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),a("span",{attrs:{class:"javascript"}},[t._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" cityOptions = ["),a("span",{attrs:{class:"hljs-string"}},[t._v("'Shanghai'")]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Beijing'")]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Guangzhou'")]),t._v(", "),a("span",{attrs:{class:"hljs-string"}},[t._v("'Shenzhen'")]),t._v("];\n\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),a("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),a("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("checkboxGroup1")]),t._v(": ["),a("span",{attrs:{class:"hljs-string"}},[t._v("'Shanghai'")]),t._v("],\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("checkboxGroup2")]),t._v(": ["),a("span",{attrs:{class:"hljs-string"}},[t._v("'Beijing'")]),t._v("],\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("checkboxGroup3")]),t._v(": ["),a("span",{attrs:{class:"hljs-string"}},[t._v("'Guangzhou'")]),t._v("],\n "),a("span",{attrs:{class:"hljs-attr"}},[t._v("cities")]),t._v(": cityOptions\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[t._v("</"),a("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(9),t._m(10),t._m(11),t._m(12),t._m(13),t._m(14)],1)},n=[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"checkbox"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"basic-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"disabled-state"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#disabled-state","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled State")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"checkbox-group"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox group")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"indeterminate"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#indeterminate","aria-hidden":"true"}},[this._v("¶")]),this._v(" Indeterminate")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[s._v("The "),t("code",{pre:!0},[s._v("indeterminate")]),s._v(" property can help you to achieve a 'check all' effect.")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"minimum-maximum-items-checked"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#minimum-maximum-items-checked","aria-hidden":"true"}},[this._v("¶")]),this._v(" Minimum / Maximum items checked")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[s._v("The "),t("code",{pre:!0},[s._v("min")]),s._v(" and "),t("code",{pre:!0},[s._v("max")]),s._v(" properties can help you to limit the number of checked items.")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"button-style"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#button-style","aria-hidden":"true"}},[this._v("¶")]),this._v(" Button style")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"checkbox-attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Options")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("label")]),t("td",[s._v("value of the checkbox when used inside a "),t("code",{pre:!0},[s._v("checkbox-group")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("true-label")]),t("td",[s._v("value of the checkbox if it's checked")]),t("td",[s._v("string, number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("false-label")]),t("td",[s._v("value of the checkbox if it's not checked")]),t("td",[s._v("string, number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("native 'name' attribute")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("if the checkbox is disabled")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("checked")]),t("td",[s._v("if the checkbox is checked")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("indeterminate")]),t("td",[s._v("same as "),t("code",{pre:!0},[s._v("indeterminate")]),s._v(" in native checkbox")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"checkbox-group-attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox-group Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Options")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("size")]),t("td",[s._v("the size of checkbox buttons")]),t("td",[s._v("string")]),t("td",[s._v("large/small")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("fill")]),t("td",[s._v("border and background color when button is active")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#20a0ff")])]),t("tr",[t("td",[s._v("text-color")]),t("td",[s._v("font color when button is active")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#ffffff")])]),t("tr",[t("td",[s._v("min")]),t("td",[s._v("minimum number of checkbox checked")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("max")]),t("td",[s._v("maximum number of checkbox checked")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"checkbox-events"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox Events")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Event Name")]),t("th",[s._v("Description")]),t("th",[s._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("triggers when the binding value changes")]),t("td",[s._v("Event object")])])])])}]},921:function(s,t,a){"use strict";a.d(t,"a",function(){return l}),a.d(t,"b",function(){return n});var l=function(){var t=this,s=t.$createElement,s=t._self._c||s;return s("section",[t._m(0),s("p",[t._v("Use Date Picker for date input.")]),t._m(1),s("p",[t._v("Basic date picker measured by 'day'.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div class="block">\n <span class="demonstration">Default</span>\n <el-date-picker v-model="value1" type="date" placeholder="Pick a day">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">Picker with quick options</span>\n <el-date-picker v-model="value2" type="date" placeholder="Pick a day" :picker-options="pickerOptions1">\n </el-date-picker>\n </div>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n return {\n pickerOptions1: {\n shortcuts: [{\n text: 'Today',\n onClick: function(picker) {\n picker.$emit('pick', new Date());\n }\n }, {\n text: 'Yesterday',\n onClick: function(picker) {\n var date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24);\n picker.$emit('pick', date);\n }\n }, {\n text: 'A week ago',\n onClick: function(picker) {\n var date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit('pick', date);\n }\n }]\n },\n value1: '',\n value2: '',\n };\n }\n };\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[s("div",{staticClass:"block"},[s("span",{staticClass:"demonstration"},[t._v("Default")]),s("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day"},model:{value:t.value1,callback:function(s){t.value1=s},expression:"value1"}})],1),s("div",{staticClass:"block"},[s("span",{staticClass:"demonstration"},[t._v("Picker with quick options")]),s("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day","picker-options":t.pickerOptions1},model:{value:t.value2,callback:function(s){t.value2=s},expression:"value2"}})],1)]],2),s("p",[t._v("The measurement is determined by the "),s("code",[t._v("type")]),t._v(" attribute. You can enable quick options by creating a "),s("code",[t._v("picker-options")]),t._v(" object with "),s("code",[t._v("shortcuts")]),t._v(" property. The disabled date is set by "),s("code",[t._v("disabledDate")]),t._v(", which is a function.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"demonstration"')]),t._v(">")]),t._v("Default"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-date-picker")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value1"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("type")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"date"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Pick a day"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-date-picker")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"demonstration"')]),t._v(">")]),t._v("Picker with quick options"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-date-picker")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value2"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("type")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"date"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Pick a day"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":picker-options")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"pickerOptions1"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-date-picker")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("pickerOptions1")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("shortcuts")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("text")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Today'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("onClick")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("picker")]),t._v(") ")]),t._v("{\n picker.$emit("),s("span",{attrs:{class:"hljs-string"}},[t._v("'pick'")]),t._v(", "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("new")]),t._v(" "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("Date")]),t._v("());\n }\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("text")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Yesterday'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("onClick")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("picker")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" date = "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("new")]),t._v(" "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("Date")]),t._v("();\n date.setTime(date.getTime() - "),s("span",{attrs:{class:"hljs-number"}},[t._v("3600")]),t._v(" * "),s("span",{attrs:{class:"hljs-number"}},[t._v("1000")]),t._v(" * "),s("span",{attrs:{class:"hljs-number"}},[t._v("24")]),t._v(");\n picker.$emit("),s("span",{attrs:{class:"hljs-string"}},[t._v("'pick'")]),t._v(", date);\n }\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("text")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'A week ago'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("onClick")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("picker")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" date = "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("new")]),t._v(" "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("Date")]),t._v("();\n date.setTime(date.getTime() - "),s("span",{attrs:{class:"hljs-number"}},[t._v("3600")]),t._v(" * "),s("span",{attrs:{class:"hljs-number"}},[t._v("1000")]),t._v(" * "),s("span",{attrs:{class:"hljs-number"}},[t._v("24")]),t._v(" * "),s("span",{attrs:{class:"hljs-number"}},[t._v("7")]),t._v(");\n picker.$emit("),s("span",{attrs:{class:"hljs-string"}},[t._v("'pick'")]),t._v(", date);\n }\n }]\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value1")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value2")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v(",\n };\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(2),s("p",[t._v("You can choose week, month or year by extending the standard date picker component.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n <span class="demonstration">Week</span>\n <el-date-picker v-model="value3" type="week" format="Week WW" placeholder="Pick a week">\n </el-date-picker>\n</div>\n<div class="block">\n <span class="demonstration">Month</span>\n <el-date-picker v-model="value4" type="month" placeholder="Pick a month">\n </el-date-picker>\n</div>\n<div class="block">\n <span class="demonstration">Year</span>\n <el-date-picker v-model="value5" type="year" placeholder="Pick a year">\n </el-date-picker>\n</div>\n\n\n',script:"\n export default {\n data: function() {\n return {\n value3: '',\n value4: '',\n value5: ''\n };\n }\n };\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("div",{staticClass:"block"},[s("span",{staticClass:"demonstration"},[t._v("Week")]),s("el-date-picker",{attrs:{type:"week",format:"Week WW",placeholder:"Pick a week"},model:{value:t.value3,callback:function(s){t.value3=s},expression:"value3"}})],1),s("div",{staticClass:"block"},[s("span",{staticClass:"demonstration"},[t._v("Month")]),s("el-date-picker",{attrs:{type:"month",placeholder:"Pick a month"},model:{value:t.value4,callback:function(s){t.value4=s},expression:"value4"}})],1),s("div",{staticClass:"block"},[s("span",{staticClass:"demonstration"},[t._v("Year")]),s("el-date-picker",{attrs:{type:"year",placeholder:"Pick a year"},model:{value:t.value5,callback:function(s){t.value5=s},expression:"value5"}})],1)]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"demonstration"')]),t._v(">")]),t._v("Week"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-date-picker")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value3"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("type")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"week"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("format")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Week WW"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Pick a week"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-date-picker")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"demonstration"')]),t._v(">")]),t._v("Month"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-date-picker")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value4"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("type")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"month"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Pick a month"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-date-picker")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"demonstration"')]),t._v(">")]),t._v("Year"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-date-picker")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value5"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("type")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"year"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Pick a year"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-date-picker")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value3")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value4")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value5")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v("\n };\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(3),s("p",[t._v("Picking a date range is supported.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div class="block">\n <span class="demonstration">Default</span>\n <el-date-picker v-model="value6" type="daterange" placeholder="Pick a range">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">With quick options</span>\n <el-date-picker v-model="value7" type="daterange" align="right" placeholder="Pick a range" :picker-options="pickerOptions2">\n </el-date-picker>\n </div>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n return {\n pickerOptions2: {\n shortcuts: [{\n text: 'Last week',\n onClick: function(picker) {\n var end = new Date();\n var start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: 'Last month',\n onClick: function(picker) {\n var end = new Date();\n var start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: 'Last 3 months',\n onClick: function(picker) {\n var end = new Date();\n var start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n picker.$emit('pick', [start, end]);\n }\n }]\n },\n value6: '',\n value7: ''\n };\n }\n };\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[s("div",{staticClass:"block"},[s("span",{staticClass:"demonstration"},[t._v("Default")]),s("el-date-picker",{attrs:{type:"daterange",placeholder:"Pick a range"},model:{value:t.value6,callback:function(s){t.value6=s},expression:"value6"}})],1),s("div",{staticClass:"block"},[s("span",{staticClass:"demonstration"},[t._v("With quick options")]),s("el-date-picker",{attrs:{type:"daterange",align:"right",placeholder:"Pick a range","picker-options":t.pickerOptions2},model:{value:t.value7,callback:function(s){t.value7=s},expression:"value7"}})],1)]],2),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"demonstration"')]),t._v(">")]),t._v("Default"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-date-picker")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value6"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("type")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"daterange"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Pick a range"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-date-picker")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"demonstration"')]),t._v(">")]),t._v("With quick options"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-date-picker")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value7"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("type")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"daterange"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("align")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"right"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Pick a range"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":picker-options")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"pickerOptions2"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-date-picker")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("pickerOptions2")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("shortcuts")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("text")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Last week'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("onClick")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("picker")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" end = "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("new")]),t._v(" "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("Date")]),t._v("();\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" start = "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("new")]),t._v(" "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("Date")]),t._v("();\n start.setTime(start.getTime() - "),s("span",{attrs:{class:"hljs-number"}},[t._v("3600")]),t._v(" * "),s("span",{attrs:{class:"hljs-number"}},[t._v("1000")]),t._v(" * "),s("span",{attrs:{class:"hljs-number"}},[t._v("24")]),t._v(" * "),s("span",{attrs:{class:"hljs-number"}},[t._v("7")]),t._v(");\n picker.$emit("),s("span",{attrs:{class:"hljs-string"}},[t._v("'pick'")]),t._v(", [start, end]);\n }\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("text")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Last month'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("onClick")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("picker")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" end = "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("new")]),t._v(" "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("Date")]),t._v("();\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" start = "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("new")]),t._v(" "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("Date")]),t._v("();\n start.setTime(start.getTime() - "),s("span",{attrs:{class:"hljs-number"}},[t._v("3600")]),t._v(" * "),s("span",{attrs:{class:"hljs-number"}},[t._v("1000")]),t._v(" * "),s("span",{attrs:{class:"hljs-number"}},[t._v("24")]),t._v(" * "),s("span",{attrs:{class:"hljs-number"}},[t._v("30")]),t._v(");\n picker.$emit("),s("span",{attrs:{class:"hljs-string"}},[t._v("'pick'")]),t._v(", [start, end]);\n }\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("text")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Last 3 months'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("onClick")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("picker")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" end = "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("new")]),t._v(" "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("Date")]),t._v("();\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" start = "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("new")]),t._v(" "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("Date")]),t._v("();\n start.setTime(start.getTime() - "),s("span",{attrs:{class:"hljs-number"}},[t._v("3600")]),t._v(" * "),s("span",{attrs:{class:"hljs-number"}},[t._v("1000")]),t._v(" * "),s("span",{attrs:{class:"hljs-number"}},[t._v("24")]),t._v(" * "),s("span",{attrs:{class:"hljs-number"}},[t._v("90")]),t._v(");\n picker.$emit("),s("span",{attrs:{class:"hljs-string"}},[t._v("'pick'")]),t._v(", [start, end]);\n }\n }]\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value6")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value7")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v("\n };\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(4),t._m(5),t._m(6),t._m(7),t._m(8),t._m(9),t._m(10),t._m(11)],1)},n=[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"datepicker"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#datepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" DatePicker")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"enter-date"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#enter-date","aria-hidden":"true"}},[this._v("¶")]),this._v(" Enter Date")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"other-measurements"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#other-measurements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Other measurements")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"date-range"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#date-range","aria-hidden":"true"}},[this._v("¶")]),this._v(" Date Range")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("readonly")]),t("td",[s._v("whether DatePicker is read only")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("whether DatePicker is disabled")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("size of Input")]),t("td",[s._v("string")]),t("td",[s._v("large/small/mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("editable")]),t("td",[s._v("whether the input is editable")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("clearable")]),t("td",[s._v("Whether to show clear button")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("placeholder")]),t("td",[s._v("placeholder")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("type of the picker")]),t("td",[s._v("string")]),t("td",[s._v("year/month/date/datetime/ week/datetimerange/daterange")]),t("td",[s._v("date")])]),t("tr",[t("td",[s._v("format")]),t("td",[s._v("format of the picker")]),t("td",[s._v("string")]),t("td",[s._v("year "),t("code",{pre:!0},[s._v("yyyy")]),s._v(" month "),t("code",{pre:!0},[s._v("MM")]),s._v(" day "),t("code",{pre:!0},[s._v("dd")]),s._v(", hour "),t("code",{pre:!0},[s._v("HH")]),s._v(", minute "),t("code",{pre:!0},[s._v("mm")]),s._v(", second "),t("code",{pre:!0},[s._v("ss")])]),t("td",[s._v("yyyy-MM-dd")])]),t("tr",[t("td",[s._v("align")]),t("td",[s._v("alignment")]),t("td",[s._v("left/center/right")]),t("td",[s._v("left")]),t("td")]),t("tr",[t("td",[s._v("popper-class")]),t("td",[s._v("custom class name for DatePicker's dropdown")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("picker-options")]),t("td",[s._v("additional options, check the table below")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("{}")])]),t("tr",[t("td",[s._v("range-separator")]),t("td",[s._v("range separator")]),t("td",[s._v("string")]),t("td",[s._v("-")]),t("td",[s._v("' - '")])]),t("tr",[t("td",[s._v("default-value")]),t("td",[s._v("optional default time of the picker")]),t("td",[s._v("Date")]),t("td",[s._v("anything accepted by "),t("code",{pre:!0},[s._v("new Date()")])]),t("td",[s._v("-")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"picker-options"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Picker Options")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("shortcuts")]),t("td",[s._v("a { text, onClick } object array to set shortcut options, check the table below")]),t("td",[s._v("object[]")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabledDate")]),t("td",[s._v("a function determining if a date is disabled with that date as its parameter. Should return a Boolean")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("firstDayOfWeek")]),t("td",[s._v("first day of week")]),t("td",[s._v("Number")]),t("td",[s._v("1 to 7")]),t("td",[s._v("7")])]),t("tr",[t("td",[s._v("onPick")]),t("td",[s._v("a callback that triggers when the seleted date is changed. Only for "),t("code",{pre:!0},[s._v("daterange")]),s._v(" and "),t("code",{pre:!0},[s._v("datetimerange")]),s._v(".")]),t("td",[s._v("Function({ maxDate, minDate })")]),t("td",[s._v("-")]),t("td",[s._v("-")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"shortcuts"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[this._v("¶")]),this._v(" shortcuts")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("text")]),t("td",[s._v("title of the shortcut")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("onClick")]),t("td",[s._v("callback function, triggers when the shortcut is clicked, with the "),t("code",{pre:!0},[s._v("vm")]),s._v(" as its parameter. You can change the picker value by emitting the "),t("code",{pre:!0},[s._v("pick")]),s._v(" event. Example: "),t("code",{pre:!0},[s._v("vm.$emit('pick', new Date())")])]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"events"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Event Name")]),t("th",[s._v("Description")]),t("th",[s._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("triggers when input value changes")]),t("td",[s._v("formatted value")])])])])}]},922:function(s,t,a){"use strict";a.d(t,"a",function(){return l}),a.d(t,"b",function(){return n});var l=function(){var t=this,s=t.$createElement,s=t._self._c||s;return s("section",[t._m(0),s("p",[t._v("Select date and time in one picker.")]),t._m(1),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div class="block">\n <span class="demonstration">Default</span>\n <el-date-picker v-model="value1" type="datetime" placeholder="Select date and time">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">With shortcuts</span>\n <el-date-picker v-model="value2" type="datetime" placeholder="Select date and time" :picker-options="pickerOptions1">\n </el-date-picker>\n </div>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n return {\n pickerOptions1: {\n shortcuts: [{\n text: 'Today',\n onClick: function(picker) {\n picker.$emit('pick', new Date());\n }\n }, {\n text: 'Yesterday',\n onClick: function(picker) {\n var date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24);\n picker.$emit('pick', date);\n }\n }, {\n text: 'A week ago',\n onClick: function(picker) {\n var date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit('pick', date);\n }\n }]\n },\n value1: '',\n value2: ''\n };\n }\n };\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[s("div",{staticClass:"block"},[s("span",{staticClass:"demonstration"},[t._v("Default")]),s("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time"},model:{value:t.value1,callback:function(s){t.value1=s},expression:"value1"}})],1),s("div",{staticClass:"block"},[s("span",{staticClass:"demonstration"},[t._v("With shortcuts")]),s("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time","picker-options":t.pickerOptions1},model:{value:t.value2,callback:function(s){t.value2=s},expression:"value2"}})],1)]],2),s("p",[t._v("You can select date and time in one picker at the same time by setting "),s("code",[t._v("type")]),t._v(" to "),s("code",[t._v("datetime")]),t._v(". The way to use shortcuts is the same as Date Picker.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"demonstration"')]),t._v(">")]),t._v("Default"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-date-picker")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value1"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("type")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"datetime"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Select date and time"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-date-picker")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"demonstration"')]),t._v(">")]),t._v("With shortcuts"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-date-picker")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value2"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("type")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"datetime"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Select date and time"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":picker-options")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"pickerOptions1"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-date-picker")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("pickerOptions1")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("shortcuts")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("text")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Today'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("onClick")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("picker")]),t._v(") ")]),t._v("{\n picker.$emit("),s("span",{attrs:{class:"hljs-string"}},[t._v("'pick'")]),t._v(", "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("new")]),t._v(" "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("Date")]),t._v("());\n }\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("text")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Yesterday'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("onClick")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("picker")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" date = "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("new")]),t._v(" "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("Date")]),t._v("();\n date.setTime(date.getTime() - "),s("span",{attrs:{class:"hljs-number"}},[t._v("3600")]),t._v(" * "),s("span",{attrs:{class:"hljs-number"}},[t._v("1000")]),t._v(" * "),s("span",{attrs:{class:"hljs-number"}},[t._v("24")]),t._v(");\n picker.$emit("),s("span",{attrs:{class:"hljs-string"}},[t._v("'pick'")]),t._v(", date);\n }\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("text")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'A week ago'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("onClick")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("picker")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" date = "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("new")]),t._v(" "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("Date")]),t._v("();\n date.setTime(date.getTime() - "),s("span",{attrs:{class:"hljs-number"}},[t._v("3600")]),t._v(" * "),s("span",{attrs:{class:"hljs-number"}},[t._v("1000")]),t._v(" * "),s("span",{attrs:{class:"hljs-number"}},[t._v("24")]),t._v(" * "),s("span",{attrs:{class:"hljs-number"}},[t._v("7")]),t._v(");\n picker.$emit("),s("span",{attrs:{class:"hljs-string"}},[t._v("'pick'")]),t._v(", date);\n }\n }]\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value1")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value2")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v("\n };\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(2),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div class="block">\n <span class="demonstration">Default</span>\n <el-date-picker v-model="value3" type="datetimerange" placeholder="Select time range">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">With shortcuts</span>\n <el-date-picker v-model="value4" type="datetimerange" :picker-options="pickerOptions2" placeholder="Select time range" align="right">\n </el-date-picker>\n </div>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n return {\n pickerOptions2: {\n shortcuts: [{\n text: 'Last week',\n onClick: function(picker) {\n var end = new Date();\n var start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: 'Last month',\n onClick: function(picker) {\n var end = new Date();\n var start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: 'Last 3 months',\n onClick: function(picker) {\n var end = new Date();\n var start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n picker.$emit('pick', [start, end]);\n }\n }]\n },\n value3: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],\n value4: ''\n };\n }\n };\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[s("div",{staticClass:"block"},[s("span",{staticClass:"demonstration"},[t._v("Default")]),s("el-date-picker",{attrs:{type:"datetimerange",placeholder:"Select time range"},model:{value:t.value3,callback:function(s){t.value3=s},expression:"value3"}})],1),s("div",{staticClass:"block"},[s("span",{staticClass:"demonstration"},[t._v("With shortcuts")]),s("el-date-picker",{attrs:{type:"datetimerange","picker-options":t.pickerOptions2,placeholder:"Select time range",align:"right"},model:{value:t.value4,callback:function(s){t.value4=s},expression:"value4"}})],1)]],2),s("p",[t._v("You can select date and time range by setting "),s("code",[t._v("type")]),t._v(" to "),s("code",[t._v("datetimerange")]),t._v(".")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"demonstration"')]),t._v(">")]),t._v("Default"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-date-picker")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value3"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("type")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"datetimerange"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Select time range"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-date-picker")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"block"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"demonstration"')]),t._v(">")]),t._v("With shortcuts"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-date-picker")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"value4"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("type")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"datetimerange"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":picker-options")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"pickerOptions2"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Select time range"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("align")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"right"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-date-picker")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("pickerOptions2")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("shortcuts")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("text")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Last week'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("onClick")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("picker")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" end = "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("new")]),t._v(" "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("Date")]),t._v("();\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" start = "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("new")]),t._v(" "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("Date")]),t._v("();\n start.setTime(start.getTime() - "),s("span",{attrs:{class:"hljs-number"}},[t._v("3600")]),t._v(" * "),s("span",{attrs:{class:"hljs-number"}},[t._v("1000")]),t._v(" * "),s("span",{attrs:{class:"hljs-number"}},[t._v("24")]),t._v(" * "),s("span",{attrs:{class:"hljs-number"}},[t._v("7")]),t._v(");\n picker.$emit("),s("span",{attrs:{class:"hljs-string"}},[t._v("'pick'")]),t._v(", [start, end]);\n }\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("text")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Last month'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("onClick")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("picker")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" end = "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("new")]),t._v(" "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("Date")]),t._v("();\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" start = "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("new")]),t._v(" "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("Date")]),t._v("();\n start.setTime(start.getTime() - "),s("span",{attrs:{class:"hljs-number"}},[t._v("3600")]),t._v(" * "),s("span",{attrs:{class:"hljs-number"}},[t._v("1000")]),t._v(" * "),s("span",{attrs:{class:"hljs-number"}},[t._v("24")]),t._v(" * "),s("span",{attrs:{class:"hljs-number"}},[t._v("30")]),t._v(");\n picker.$emit("),s("span",{attrs:{class:"hljs-string"}},[t._v("'pick'")]),t._v(", [start, end]);\n }\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("text")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'Last 3 months'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("onClick")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("picker")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" end = "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("new")]),t._v(" "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("Date")]),t._v("();\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("var")]),t._v(" start = "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("new")]),t._v(" "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("Date")]),t._v("();\n start.setTime(start.getTime() - "),s("span",{attrs:{class:"hljs-number"}},[t._v("3600")]),t._v(" * "),s("span",{attrs:{class:"hljs-number"}},[t._v("1000")]),t._v(" * "),s("span",{attrs:{class:"hljs-number"}},[t._v("24")]),t._v(" * "),s("span",{attrs:{class:"hljs-number"}},[t._v("90")]),t._v(");\n picker.$emit("),s("span",{attrs:{class:"hljs-string"}},[t._v("'pick'")]),t._v(", [start, end]);\n }\n }]\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value3")]),t._v(": ["),s("span",{attrs:{class:"hljs-keyword"}},[t._v("new")]),t._v(" "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("Date")]),t._v("("),s("span",{attrs:{class:"hljs-number"}},[t._v("2000")]),t._v(", "),s("span",{attrs:{class:"hljs-number"}},[t._v("10")]),t._v(", "),s("span",{attrs:{class:"hljs-number"}},[t._v("10")]),t._v(", "),s("span",{attrs:{class:"hljs-number"}},[t._v("10")]),t._v(", "),s("span",{attrs:{class:"hljs-number"}},[t._v("10")]),t._v("), "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("new")]),t._v(" "),s("span",{attrs:{class:"hljs-built_in"}},[t._v("Date")]),t._v("("),s("span",{attrs:{class:"hljs-number"}},[t._v("2000")]),t._v(", "),s("span",{attrs:{class:"hljs-number"}},[t._v("10")]),t._v(", "),s("span",{attrs:{class:"hljs-number"}},[t._v("11")]),t._v(", "),s("span",{attrs:{class:"hljs-number"}},[t._v("10")]),t._v(", "),s("span",{attrs:{class:"hljs-number"}},[t._v("10")]),t._v(")],\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value4")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v("\n };\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(3),t._m(4),t._m(5),t._m(6),t._m(7),t._m(8),t._m(9),t._m(10)],1)},n=[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"datetimepicker"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" DateTimePicker")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"date-and-time"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#date-and-time","aria-hidden":"true"}},[this._v("¶")]),this._v(" Date and time")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"date-and-time-range"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#date-and-time-range","aria-hidden":"true"}},[this._v("¶")]),this._v(" Date and time range")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("readonly")]),t("td",[s._v("whether DatePicker is read only")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("whether DatePicker is disabled")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("editable")]),t("td",[s._v("whether the input is editable")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("clearable")]),t("td",[s._v("Whether to show clear button")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("size of Input")]),t("td",[s._v("string")]),t("td",[s._v("large/small/mini")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("placeholder")]),t("td",[s._v("placeholder")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("type of the picker")]),t("td",[s._v("string")]),t("td",[s._v("year/month/date/datetime/ week/datetimerange/daterange")]),t("td",[s._v("date")])]),t("tr",[t("td",[s._v("format")]),t("td",[s._v("format of the picker")]),t("td",[s._v("string")]),t("td",[s._v("year "),t("code",{pre:!0},[s._v("yyyy")]),s._v(" month "),t("code",{pre:!0},[s._v("MM")]),s._v(" day "),t("code",{pre:!0},[s._v("dd")]),s._v(", hour "),t("code",{pre:!0},[s._v("HH")]),s._v(", minute "),t("code",{pre:!0},[s._v("mm")]),s._v(", second "),t("code",{pre:!0},[s._v("ss")])]),t("td",[s._v("yyyy-MM-dd")])]),t("tr",[t("td",[s._v("align")]),t("td",[s._v("alignment")]),t("td",[s._v("left/center/right")]),t("td",[s._v("left")]),t("td")]),t("tr",[t("td",[s._v("popper-class")]),t("td",[s._v("custom class name for DateTimePicker's dropdown")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("picker-options")]),t("td",[s._v("additional options, check the table below")]),t("td",[s._v("object")]),t("td",[s._v("—")]),t("td",[s._v("{}")])]),t("tr",[t("td",[s._v("range-separator")]),t("td",[s._v("range separator")]),t("td",[s._v("string")]),t("td",[s._v("-")]),t("td",[s._v("' - '")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"picker-options"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Picker Options")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("shortcuts")]),t("td",[s._v("a { text, onClick } object array to set shortcut options, check the table below")]),t("td",[s._v("object[]")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabledDate")]),t("td",[s._v("a function determining if a date is disabled with that date as its parameter. Should return a Boolean")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"shortcuts"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[this._v("¶")]),this._v(" shortcuts")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("text")]),t("td",[s._v("title of the shortcut")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("onClick")]),t("td",[s._v("callback function, triggers when the shortcut is clicked, with the "),t("code",{pre:!0},[s._v("vm")]),s._v(" as its parameter. You can change the picker value by emitting the "),t("code",{pre:!0},[s._v("pick")]),s._v(" event. Example: "),t("code",{pre:!0},[s._v("vm.$emit('pick', new Date())")])]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"events"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Event Name")]),t("th",[s._v("Description")]),t("th",[s._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[s._v("change")]),t("td",[s._v("triggers when input value changes")]),t("td",[s._v("formatted value")])])])])}]},923:function(s,t,a){"use strict";a.d(t,"a",function(){return l}),a.d(t,"b",function(){return n});var l=function(){var t=this,s=t.$createElement,s=t._self._c||s;return s("section",[t._m(0),s("p",[t._v("Informs users while preserving the current page state.")]),t._m(1),s("p",[t._v("Dialog pops up a dialog box, and it's quite customizable.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button type="text" @click="dialogVisible = true">click to open the Dialog</el-button>\n\n<el-dialog title="Tips" :visible.sync="dialogVisible" size="tiny" :before-close="handleClose">\n <span>This is a message</span>\n <span slot="footer" class="dialog-footer">\n <el-button @click="dialogVisible = false">Cancel</el-button>\n <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>\n </span>\n</el-dialog>\n\n\n',script:"\n export default {\n data: function() {\n return {\n dialogVisible: false\n };\n },\n methods: {\n handleClose: function(done) {\n this.$confirm('Are you sure to close this dialog?', {\n callback: function(action) {\n if(action === 'confirm') {\n done();\n }\n }\n });\n }\n }\n };\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-button",{attrs:{type:"text"},on:{click:function(s){t.dialogVisible=!0}}},[t._v("click to open the Dialog")]),s("el-dialog",{attrs:{title:"Tips",visible:t.dialogVisible,size:"tiny","before-close":t.handleClose},on:{"update:visible":function(s){t.dialogVisible=s}}},[s("span",[t._v("This is a message")]),s("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[s("el-button",{on:{click:function(s){t.dialogVisible=!1}}},[t._v("Cancel")]),s("el-button",{attrs:{type:"primary"},on:{click:function(s){t.dialogVisible=!1}}},[t._v("Confirm")])],1)])],1),s("p",[t._v("Set the "),s("code",[t._v("visible")]),t._v(" attribute with a "),s("code",[t._v("Boolean")]),t._v(", and Dialog shows when it is "),s("code",[t._v("true")]),t._v(". The Dialog has two parts: "),s("code",[t._v("body")]),t._v(" and "),s("code",[t._v("footer")]),t._v(", and the latter requires a "),s("code",[t._v("slot")]),t._v(" named "),s("code",[t._v("footer")]),t._v(". The optional "),s("code",[t._v("title")]),t._v(" attribute (empty by default) is for defining a title. Finally, this example demonstrates how "),s("code",[t._v("before-close")]),t._v(" is used.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("type")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"text"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@click")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"dialogVisible = true"')]),t._v(">")]),t._v("click to open the Dialog"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-dialog")]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("title")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Tips"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":visible.sync")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"dialogVisible"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("size")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"tiny"')]),t._v("\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":before-close")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"handleClose"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("This is a message"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("slot")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"footer"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"dialog-footer"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@click")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"dialogVisible = false"')]),t._v(">")]),t._v("Cancel"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("type")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"primary"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@click")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"dialogVisible = false"')]),t._v(">")]),t._v("Confirm"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-dialog")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("dialogVisible")]),t._v(": "),s("span",{attrs:{class:"hljs-literal"}},[t._v("false")]),t._v("\n };\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("methods")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("handleClose")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("done")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("this")]),t._v(".$confirm("),s("span",{attrs:{class:"hljs-string"}},[t._v("'Are you sure to close this dialog?'")]),t._v(", {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("callback")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}},[t._v("action")]),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("if")]),t._v("(action === "),s("span",{attrs:{class:"hljs-string"}},[t._v("'confirm'")]),t._v(") {\n done();\n }\n }\n });\n }\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(2),s("p",[t._v("The content of Dialog can be anything, even a table or a form. This example shows how to use YufpWP Table and Form with Dialog。")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\x3c!-- Table --\x3e\n<el-button type="text" @click="dialogTableVisible = true">open a Table nested Dialog</el-button>\n\n<el-dialog title="Shipping address" :visible.sync="dialogTableVisible">\n <el-table :data="gridData">\n <el-table-column property="date" label="Date" width="150"></el-table-column>\n <el-table-column property="name" label="Name" width="200"></el-table-column>\n <el-table-column property="address" label="Address"></el-table-column>\n </el-table>\n</el-dialog>\n\n\x3c!-- Form --\x3e\n<el-button type="text" @click="dialogFormVisible = true">open a Form nested Dialog</el-button>\n\n<el-dialog title="Shipping address" :visible.sync="dialogFormVisible">\n <el-form :model="form">\n <el-form-item label="Promotion name" :label-width="formLabelWidth">\n <el-input v-model="form.name" auto-complete="off"></el-input>\n </el-form-item>\n <el-form-item label="Zones" :label-width="formLabelWidth">\n <el-select v-model="form.region" placeholder="Please select a zone">\n <el-option label="Zone No.1" value="shanghai"></el-option>\n <el-option label="Zone No.2" value="beijing"></el-option>\n </el-select>\n </el-form-item>\n </el-form>\n <span slot="footer" class="dialog-footer">\n <el-button @click="dialogFormVisible = false">Cancel</el-button>\n <el-button type="primary" @click="dialogFormVisible = false">Confirm</el-button>\n </span>\n</el-dialog>\n\n\n',script:"\n export default {\n data: function() {\n return {\n gridData: [{\n date: '2016-05-02',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-04',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-01',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-03',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }],\n dialogTableVisible: false,\n dialogFormVisible: false,\n form: {\n name: '',\n region: '',\n date1: '',\n date2: '',\n delivery: false,\n type: [],\n resource: '',\n desc: ''\n },\n formLabelWidth: '120px'\n };\n }\n };\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-button",{attrs:{type:"text"},on:{click:function(s){t.dialogTableVisible=!0}}},[t._v("open a Table nested Dialog")]),s("el-dialog",{attrs:{title:"Shipping address",visible:t.dialogTableVisible},on:{"update:visible":function(s){t.dialogTableVisible=s}}},[s("el-table",{attrs:{data:t.gridData}},[s("el-table-column",{attrs:{property:"date",label:"Date",width:"150"}}),s("el-table-column",{attrs:{property:"name",label:"Name",width:"200"}}),s("el-table-column",{attrs:{property:"address",label:"Address"}})],1)],1),s("el-button",{attrs:{type:"text"},on:{click:function(s){t.dialogFormVisible=!0}}},[t._v("open a Form nested Dialog")]),s("el-dialog",{attrs:{title:"Shipping address",visible:t.dialogFormVisible},on:{"update:visible":function(s){t.dialogFormVisible=s}}},[s("el-form",{attrs:{model:t.form}},[s("el-form-item",{attrs:{label:"Promotion name","label-width":t.formLabelWidth}},[s("el-input",{attrs:{"auto-complete":"off"},model:{value:t.form.name,callback:function(s){t.$set(t.form,"name",s)},expression:"form.name"}})],1),s("el-form-item",{attrs:{label:"Zones","label-width":t.formLabelWidth}},[s("el-select",{attrs:{placeholder:"Please select a zone"},model:{value:t.form.region,callback:function(s){t.$set(t.form,"region",s)},expression:"form.region"}},[s("el-option",{attrs:{label:"Zone No.1",value:"shanghai"}}),s("el-option",{attrs:{label:"Zone No.2",value:"beijing"}})],1)],1)],1),s("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[s("el-button",{on:{click:function(s){t.dialogFormVisible=!1}}},[t._v("Cancel")]),s("el-button",{attrs:{type:"primary"},on:{click:function(s){t.dialogFormVisible=!1}}},[t._v("Confirm")])],1)],1)],1),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-comment"}},[t._v("\x3c!-- Table --\x3e")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("type")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"text"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@click")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"dialogTableVisible = true"')]),t._v(">")]),t._v("open a Table nested Dialog"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-dialog")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("title")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Shipping address"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":visible.sync")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"dialogTableVisible"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-table")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":data")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"gridData"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-table-column")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("property")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"date"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Date"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("width")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"150"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-table-column")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-table-column")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("property")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"name"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Name"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("width")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"200"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-table-column")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-table-column")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("property")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"address"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Address"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-table-column")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-table")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-dialog")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-comment"}},[t._v("\x3c!-- Form --\x3e")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("type")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"text"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@click")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"dialogFormVisible = true"')]),t._v(">")]),t._v("open a Form nested Dialog"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-dialog")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("title")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Shipping address"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":visible.sync")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"dialogFormVisible"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-form")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"form"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-form-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Promotion name"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":label-width")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"formLabelWidth"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"form.name"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("auto-complete")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"off"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-input")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-form-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-form-item")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Zones"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":label-width")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"formLabelWidth"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-select")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"form.region"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("placeholder")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Please select a zone"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-option")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Zone No.1"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"shanghai"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-option")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-option")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Zone No.2"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("value")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"beijing"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-option")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-select")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-form-item")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-form")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("slot")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"footer"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"dialog-footer"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@click")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"dialogFormVisible = false"')]),t._v(">")]),t._v("Cancel"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("type")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"primary"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@click")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"dialogFormVisible = false"')]),t._v(">")]),t._v("Confirm"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("span")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-dialog")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("gridData")]),t._v(": [{\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("date")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'2016-05-02'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'John Smith'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("address")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'No.1518, Jinshajiang Road, Putuo District'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("date")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'2016-05-04'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'John Smith'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("address")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'No.1518, Jinshajiang Road, Putuo District'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("date")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'2016-05-01'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'John Smith'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("address")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'No.1518, Jinshajiang Road, Putuo District'")]),t._v("\n }, {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("date")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'2016-05-03'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'John Smith'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("address")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'No.1518, Jinshajiang Road, Putuo District'")]),t._v("\n }],\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("dialogTableVisible")]),t._v(": "),s("span",{attrs:{class:"hljs-literal"}},[t._v("false")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("dialogFormVisible")]),t._v(": "),s("span",{attrs:{class:"hljs-literal"}},[t._v("false")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("form")]),t._v(": {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("region")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("date1")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("date2")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("delivery")]),t._v(": "),s("span",{attrs:{class:"hljs-literal"}},[t._v("false")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("type")]),t._v(": [],\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("resource")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("desc")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("''")]),t._v("\n },\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("formLabelWidth")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'120px'")]),t._v("\n };\n }\n };\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(3),t._m(4),t._m(5),t._m(6),t._m(7),t._m(8)],1)},n=[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"dialog"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#dialog","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dialog")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"basic-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"customizations"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#customizations","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customizations")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("visible")]),t("td",[s._v("visibility of Dialog, supports the .sync modifier")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("title")]),t("td",[s._v("title of Dialog. Can also be passed with a named slot (see the following table)")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("size")]),t("td",[s._v("size of Dialog")]),t("td",[s._v("string")]),t("td",[s._v("tiny/small/large/full")]),t("td",[s._v("small")])]),t("tr",[t("td",[s._v("top")]),t("td",[s._v("value for "),t("code",{pre:!0},[s._v("top")]),s._v(" of Dialog CSS, works when "),t("code",{pre:!0},[s._v("size")]),s._v(" is not "),t("code",{pre:!0},[s._v("full")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("15%")])]),t("tr",[t("td",[s._v("modal")]),t("td",[s._v("whether a mask is displayed")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("modal-append-to-body")]),t("td",[s._v("whether to append modal to body element. If false, the modal will be appended to Dialog's parent element")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("lock-scroll")]),t("td",[s._v("whether scroll of body is disabled while Dialog is displayed")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("custom-class")]),t("td",[s._v("custom class names for Dialog")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("close-on-click-modal")]),t("td",[s._v("whether the Dialog can be closed by clicking the mask")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("close-on-press-escape")]),t("td",[s._v("whether the Dialog can be closed by pressing ESC")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("show-close")]),t("td",[s._v("whether to show a close button")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("before-close")]),t("td",[s._v("callback before Dialog closes, and it will prevent Dialog from closing")]),t("td",[s._v("function(done),done is used to close the Dialog")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"slot"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Name")]),t("th",[s._v("Description")])])]),t("tbody",[t("tr",[t("td",[s._v("—")]),t("td",[s._v("content of Dialog")])]),t("tr",[t("td",[s._v("title")]),t("td",[s._v("content of the Dialog title")])]),t("tr",[t("td",[s._v("footer")]),t("td",[s._v("content of the Dialog footer")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"events"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Event Name")]),t("th",[s._v("Description")]),t("th",[s._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[s._v("open")]),t("td",[s._v("triggers when the Dialog opens")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("close")]),t("td",[s._v("triggers when the Dialog closes")]),t("td",[s._v("—")])])])])}]},924:function(s,t,a){"use strict";a.d(t,"a",function(){return l}),a.d(t,"b",function(){return n});var l=function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("section",[s._m(0),t("p",[s._v("Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification.")]),s._m(1),t("p",[s._v("Displays at the top, and disappears after 3 seconds.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-button :plain="true" @click="open">Show message</el-button>\n <el-button :plain="true" @click="openVn">VNode</el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open: function() {\n this.$message('This is a message.');\n },\n \n openVn: function() {\n var h = this.$createElement;\n this.$message({\n message: h('p', null, [\n h('span', null, 'Message can be '),\n h('i', { style: 'color: teal' }, 'VNode')\n ])\n });\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{plain:!0},on:{click:s.open}},[s._v("Show message")]),t("el-button",{attrs:{plain:!0},on:{click:s.openVn}},[s._v("VNode")])]],2),t("p",[s._v("The setup of Message is very similar to notification, so parts of the options won't be explained in detail here. You can check the options table below combined with notification doc to understand it. YufpWP has registered a "),t("code",[s._v("$message")]),s._v(" method for invoking. Message can take a string or VNode as parameter, and it will be shown as the main body.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open"')]),s._v(">")]),s._v("Show message"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"openVn"')]),s._v(">")]),s._v("VNode"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("open")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}}),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message("),t("span",{attrs:{class:"hljs-string"}},[s._v("'This is a message.'")]),s._v(");\n },\n \n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("openVn")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}}),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" h = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createElement;\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": h("),t("span",{attrs:{class:"hljs-string"}},[s._v("'p'")]),s._v(", "),t("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v(", [\n h("),t("span",{attrs:{class:"hljs-string"}},[s._v("'span'")]),s._v(", "),t("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v(", "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Message can be '")]),s._v("),\n h("),t("span",{attrs:{class:"hljs-string"}},[s._v("'i'")]),s._v(", { "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'color: teal'")]),s._v(" }, "),t("span",{attrs:{class:"hljs-string"}},[s._v("'VNode'")]),s._v(")\n ])\n });\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("Used to show the feedback of Success, Warning, Message and Error activities.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-button :plain="true" @click="open2">success</el-button>\n <el-button :plain="true" @click="open3">warning</el-button>\n <el-button :plain="true" @click="open">message</el-button>\n <el-button :plain="true" @click="open4">error</el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open: function() {\n this.$message('This is a message.');\n },\n open2: function() {\n this.$message({\n message: 'Congrats, this is a success message.',\n type: 'success'\n });\n },\n\n open3: function() {\n this.$message({\n message: 'Warning, this is a warning message.',\n type: 'warning'\n });\n },\n\n open4: function() {\n this.$message.error('Oops, this is a error message.');\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{plain:!0},on:{click:s.open2}},[s._v("success")]),t("el-button",{attrs:{plain:!0},on:{click:s.open3}},[s._v("warning")]),t("el-button",{attrs:{plain:!0},on:{click:s.open}},[s._v("message")]),t("el-button",{attrs:{plain:!0},on:{click:s.open4}},[s._v("error")])]],2),t("p",[s._v("When you need more customizations, Message component can also take an object as parameter. For example, setting value of "),t("code",[s._v("type")]),s._v(" can define different types, and its default is "),t("code",[s._v("info")]),s._v(". In such cases the main body is passed in as the value of "),t("code",[s._v("message")]),s._v(". Also, we have registered methods for different types, so you can directly call it without passing a type like "),t("code",[s._v("open4")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open2"')]),s._v(">")]),s._v("success"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open3"')]),s._v(">")]),s._v("warning"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open"')]),s._v(">")]),s._v("message"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open4"')]),s._v(">")]),s._v("error"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("open")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}}),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message("),t("span",{attrs:{class:"hljs-string"}},[s._v("'This is a message.'")]),s._v(");\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("open2")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}}),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Congrats, this is a success message.'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v("\n });\n },\n\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("open3")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}}),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Warning, this is a warning message.'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'warning'")]),s._v("\n });\n },\n\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("open4")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}}),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message.error("),t("span",{attrs:{class:"hljs-string"}},[s._v("'Oops, this is a error message.'")]),s._v(");\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("A close button can be added.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-button :plain="true" @click="open5">message</el-button>\n <el-button :plain="true" @click="open6">success</el-button>\n <el-button :plain="true" @click="open7">warning</el-button>\n <el-button :plain="true" @click="open8">error</el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open5: function() {\n this.$message({\n showClose: true,\n message: 'This is a message.'\n });\n },\n\n open6: function() {\n this.$message({\n showClose: true,\n message: 'Congrats, this is a success message.',\n type: 'success'\n });\n },\n\n open7: function() {\n this.$message({\n showClose: true,\n message: 'Warning, this is a warning message.',\n type: 'warning'\n });\n },\n\n open8: function() {\n this.$message({\n showClose: true,\n message: 'Oops, this is a error message.',\n type: 'error'\n });\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{plain:!0},on:{click:s.open5}},[s._v("message")]),t("el-button",{attrs:{plain:!0},on:{click:s.open6}},[s._v("success")]),t("el-button",{attrs:{plain:!0},on:{click:s.open7}},[s._v("warning")]),t("el-button",{attrs:{plain:!0},on:{click:s.open8}},[s._v("error")])]],2),t("p",[s._v("A default Message cannot be closed manually. If you need a closable message, you can set "),t("code",[s._v("showClose")]),s._v(" field. Besides, same as notification, message has a controllable "),t("code",[s._v("duration")]),s._v(". Default duration is 3000 ms, and it won't disappear when set to "),t("code",[s._v("0")]),s._v(".")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open5"')]),s._v(">")]),s._v("message"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open6"')]),s._v(">")]),s._v("success"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open7"')]),s._v(">")]),s._v("warning"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open8"')]),s._v(">")]),s._v("error"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("open5")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}}),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("showClose")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'This is a message.'")]),s._v("\n });\n },\n\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("open6")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}}),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("showClose")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Congrats, this is a success message.'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v("\n });\n },\n\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("open7")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}}),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("showClose")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Warning, this is a warning message.'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'warning'")]),s._v("\n });\n },\n\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("open8")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}}),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("showClose")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Oops, this is a error message.'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'error'")]),s._v("\n });\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},n=[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"message"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#message","aria-hidden":"true"}},[this._v("¶")]),this._v(" Message")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"basic-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"types"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#types","aria-hidden":"true"}},[this._v("¶")]),this._v(" Types")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"closable"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#closable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Closable")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"global-method"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[this._v("¶")]),this._v(" Global method")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[s._v("YufpWP has added a global method "),t("code",{pre:!0},[s._v("$message")]),s._v(" for Vue.prototype. So in a vue instance you can call "),t("code",{pre:!0},[s._v("Message")]),s._v(" like what we did in this page.")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"local-import"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[this._v("¶")]),this._v(" Local import")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[s._v("Import "),t("code",{pre:!0},[s._v("Message")]),s._v(":")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-javascript"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Message } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'yuwp-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[s._v("In this case you should call "),t("code",{pre:!0},[s._v("Message(options)")]),s._v(". We have also registered methods for different types, e.g. "),t("code",{pre:!0},[s._v("Message.success(options)")]),s._v(".\nYou can call "),t("code",{pre:!0},[s._v("Message.closeAll()")]),s._v(" to manually close all the instances.")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"options"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("message")]),t("td",[s._v("message text")]),t("td",[s._v("string / VNode")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("message type")]),t("td",[s._v("string")]),t("td",[s._v("success/warning/info/error")]),t("td",[s._v("info")])]),t("tr",[t("td",[s._v("iconClass")]),t("td",[s._v("custom icon's class, overrides "),t("code",{pre:!0},[s._v("type")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("customClass")]),t("td",[s._v("custom class name for Message")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("duration")]),t("td",[s._v("display duration, millisecond. If set to 0, it will not turn off automatically")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("3000")])]),t("tr",[t("td",[s._v("showClose")]),t("td",[s._v("whether to show a close button")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("true")])]),t("tr",[t("td",[s._v("onClose")]),t("td",[s._v("callback function when closed with the message instance as the parameter")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"methods"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[t("code",{pre:!0},[s._v("Message")]),s._v(" and "),t("code",{pre:!0},[s._v("this.$message")]),s._v(" returns the current Message instance. To manually close the instance, you can call "),t("code",{pre:!0},[s._v("close")]),s._v(" on it.")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Method")]),t("th",[s._v("Description")])])]),t("tbody",[t("tr",[t("td",[s._v("close")]),t("td",[s._v("close the Message")])])])])}]},925:function(s,t,a){"use strict";a.d(t,"a",function(){return l}),a.d(t,"b",function(){return n});var l=function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("section",[s._m(0),t("p",[s._v("Displays a global notification message at the upper right corner of the page.")]),s._m(1),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-button plain @click="open">\n Closes automatically\n </el-button>\n <el-button plain @click="open2">\n Won\'t close automatically\n </el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open: function() {\n var h = this.$createElement;\n\n this.$notify({\n title: 'Title',\n message: h('i', { style: 'color: teal' }, 'This is a reminder')\n });\n },\n\n open2: function() {\n this.$notify({\n title: 'Prompt',\n message: 'This is a message that does not automatically close',\n duration: 0\n });\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{plain:""},on:{click:s.open}},[s._v("\n Closes automatically\n ")]),t("el-button",{attrs:{plain:""},on:{click:s.open2}},[s._v("\n Won't close automatically\n ")])]],2),t("p",[s._v("YufpWP has registered the "),t("code",[s._v("$notify")]),s._v(" method and it receives an object as its parameter. In the simplest case, you can set the "),t("code",[s._v("title")]),s._v(" field and the"),t("code",[s._v("message")]),s._v(" field for the title and body of the notification. By default, the notification automatically closes after 4500ms, but by setting "),t("code",[s._v("duration")]),s._v(" you can control its duration. Specifically, if set to "),t("code",[s._v("0")]),s._v(", it will not close automatically. Note that "),t("code",[s._v("duration")]),s._v(" receives a "),t("code",[s._v("Number")]),s._v(" in milliseconds.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open"')]),s._v(">")]),s._v("\n Closes automatically\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open2"')]),s._v(">")]),s._v("\n Won't close automatically\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("open")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}}),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" h = "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createElement;\n\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Title'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": h("),t("span",{attrs:{class:"hljs-string"}},[s._v("'i'")]),s._v(", { "),t("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'color: teal'")]),s._v(" }, "),t("span",{attrs:{class:"hljs-string"}},[s._v("'This is a reminder'")]),s._v(")\n });\n },\n\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("open2")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}}),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Prompt'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'This is a message that does not automatically close'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("duration")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n });\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),t("p",[s._v("We provide four types: success, warning, info and error.")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-button plain @click="open3">\n Success\n </el-button>\n <el-button plain @click="open4">\n Warning\n </el-button>\n <el-button plain @click="open5">\n Info\n </el-button>\n <el-button plain @click="open6">\n Error\n </el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open3: function() {\n this.$notify({\n title: 'Success',\n message: 'This is a success message',\n type: 'success'\n });\n },\n\n open4: function() {\n this.$notify({\n title: 'Warning',\n message: 'This is a warning message',\n type: 'warning'\n });\n },\n\n open5: function() {\n this.$notify.info({\n title: 'Info',\n message: 'This is an info message'\n });\n },\n\n open6: function() {\n this.$notify.error({\n title: 'Error',\n message: 'This is an error message'\n });\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{plain:""},on:{click:s.open3}},[s._v("\n Success\n ")]),t("el-button",{attrs:{plain:""},on:{click:s.open4}},[s._v("\n Warning\n ")]),t("el-button",{attrs:{plain:""},on:{click:s.open5}},[s._v("\n Info\n ")]),t("el-button",{attrs:{plain:""},on:{click:s.open6}},[s._v("\n Error\n ")])]],2),t("p",[s._v("YufpWP provides four notification types: "),t("code",[s._v("success")]),s._v(", "),t("code",[s._v("warning")]),s._v(", "),t("code",[s._v("info")]),s._v(" and "),t("code",[s._v("error")]),s._v(". They are set by the "),t("code",[s._v("type")]),s._v(" field, and other values will be ignored. We also registered methods for these types that can be invoked directly like "),t("code",[s._v("open5")]),s._v(" and "),t("code",[s._v("open6")]),s._v(" without passing a "),t("code",[s._v("type")]),s._v(" field.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open3"')]),s._v(">")]),s._v("\n Success\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open4"')]),s._v(">")]),s._v("\n Warning\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open5"')]),s._v(">")]),s._v("\n Info\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open6"')]),s._v(">")]),s._v("\n Error\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("open3")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}}),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Success'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'This is a success message'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v("\n });\n },\n\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("open4")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}}),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Warning'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'This is a warning message'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'warning'")]),s._v("\n });\n },\n\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("open5")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}}),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify.info({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Info'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'This is an info message'")]),s._v("\n });\n },\n\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("open6")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}}),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify.error({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Error'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'This is an error message'")]),s._v("\n });\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),t("p",[s._v("Customize Notification's offset from the top edge of the screen")]),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-button plain @click="open7">\n Notification with offset\n </el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open7: function() {\n this.$notify.success({\n title: 'Success',\n message: 'This is a success message',\n offset: 100\n });\n }\n }\n }\n",style:null}}},[t("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[t("el-button",{attrs:{plain:""},on:{click:s.open7}},[s._v("\n Notification with offset\n ")])]],2),t("p",[s._v("Set the "),t("code",[s._v("offset")]),s._v(" attribute to customize Notification's offset from the top edge of the screen. Note that every Notification instance of the same moment should have the same offset.")]),t("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"open7"')]),s._v(">")]),s._v("\n Notification with offset\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),t("span",{attrs:{class:"javascript"}},[s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("open7")]),s._v(": "),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v("("),t("span",{attrs:{class:"hljs-params"}}),s._v(") ")]),s._v("{\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify.success({\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'Success'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'This is a success message'")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("offset")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("100")]),s._v("\n });\n }\n }\n }\n")]),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},n=[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"notification"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#notification","aria-hidden":"true"}},[this._v("¶")]),this._v(" Notification")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"basic-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"with-types"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#with-types","aria-hidden":"true"}},[this._v("¶")]),this._v(" With types")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"with-offset"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#with-offset","aria-hidden":"true"}},[this._v("¶")]),this._v(" With offset")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"global-method"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[this._v("¶")]),this._v(" Global method")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[s._v("YufpWP has added a global method "),t("code",{pre:!0},[s._v("$notify")]),s._v(" for Vue.prototype. So in a vue instance you can call "),t("code",{pre:!0},[s._v("Notification")]),s._v(" like what we did in this page.")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"local-import"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[this._v("¶")]),this._v(" Local import")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[s._v("Import "),t("code",{pre:!0},[s._v("Notification")]),s._v(":")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-javascript"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Notification } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'yuwp-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[s._v("In this case you should call "),t("code",{pre:!0},[s._v("Notification(options)")]),s._v(". We have also registered methods for different types, e.g. "),t("code",{pre:!0},[s._v("Notification.success(options)")]),s._v(".")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"options"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("title")]),t("td",[s._v("title")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("message")]),t("td",[s._v("description text")]),t("td",[s._v("string/Vue.VNode")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("type")]),t("td",[s._v("notification type")]),t("td",[s._v("string")]),t("td",[s._v("success/warning/info/error")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("iconClass")]),t("td",[s._v("custom icon's class. It will be overridden by "),t("code",{pre:!0},[s._v("type")])]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("customClass")]),t("td",[s._v("custom class name for Notification")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("duration")]),t("td",[s._v("duration before close. It will not automatically close if set 0")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("4500")])]),t("tr",[t("td",[s._v("onClose")]),t("td",[s._v("callback function when closed")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("onClick")]),t("td",[s._v("callback function when notification clicked")]),t("td",[s._v("function")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("offset")]),t("td",[s._v("offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset")]),t("td",[s._v("number")]),t("td",[s._v("—")]),t("td",[s._v("0")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"methods"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("p",[t("code",{pre:!0},[s._v("Notification")]),s._v(" and "),t("code",{pre:!0},[s._v("this.$notify")]),s._v(" returns the current Message instance. To manually close the instance, you can call "),t("code",{pre:!0},[s._v("close")]),s._v(" on it.")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Method")]),t("th",[s._v("Description")])])]),t("tbody",[t("tr",[t("td",[s._v("close")]),t("td",[s._v("close the Notification")])])])])}]},926:function(s,t,a){"use strict";a.d(t,"a",function(){return l}),a.d(t,"b",function(){return n});var l=function(){var t=this,s=t.$createElement,s=t._self._c||s;return s("section",[t._m(0),s("p",[t._v("Single selection among multiple options.")]),t._m(1),s("p",[t._v("Radio should not have too many options. Otherwise, use the Select component instead.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-radio class="radio" v-model="radio" label="1">optionA</el-radio>\n <el-radio class="radio" v-model="radio" label="2">optionB</el-radio>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n return {\n radio: '1'\n };\n }\n }\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[s("el-radio",{staticClass:"radio",attrs:{label:"1"},model:{value:t.radio,callback:function(s){t.radio=s},expression:"radio"}},[t._v("optionA")]),s("el-radio",{staticClass:"radio",attrs:{label:"2"},model:{value:t.radio,callback:function(s){t.radio=s},expression:"radio"}},[t._v("optionB")])]],2),s("p",[t._v("Creating a radio component is easy, you just need to bind a variable to Radio's "),s("code",[t._v("v-model")]),t._v(". It equals to the value of "),s("code",[t._v("label")]),t._v(" of the chosen radio. The type of "),s("code",[t._v("label")]),t._v(" is "),s("code",[t._v("String")]),t._v(" or "),s("code",[t._v("Number")]),t._v(".")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"radio"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"radio"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"1"')]),t._v(">")]),t._v("optionA"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"radio"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"radio"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"2"')]),t._v(">")]),t._v("optionB"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("radio")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'1'")]),t._v("\n };\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(2),t._m(3),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-radio disabled v-model="radio1" label="disabled">optionA</el-radio>\n <el-radio disabled v-model="radio1" label="selected and disabled">optionB</el-radio>\n</template>\n\n\n',script:"\n export default {\n data: function() {\n return {\n radio1: 'selected and disabled'\n };\n }\n }\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[s("el-radio",{attrs:{disabled:"",label:"disabled"},model:{value:t.radio1,callback:function(s){t.radio1=s},expression:"radio1"}},[t._v("optionA")]),s("el-radio",{attrs:{disabled:"",label:"selected and disabled"},model:{value:t.radio1,callback:function(s){t.radio1=s},expression:"radio1"}},[t._v("optionB")])]],2),s("p",[t._v("You just need to add the "),s("code",[t._v("disabled")]),t._v(" attribute.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("disabled")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"radio1"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"disabled"')]),t._v(">")]),t._v("optionA"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("disabled")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"radio1"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"selected and disabled"')]),t._v(">")]),t._v("optionB"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("radio1")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'selected and disabled'")]),t._v("\n };\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(4),s("p",[t._v("Suitable for choosing from some mutually exclusive options.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-radio-group v-model="radio2">\n <el-radio :label="3">optionA</el-radio>\n <el-radio :label="6">optionB</el-radio>\n <el-radio :label="9">optionC</el-radio>\n</el-radio-group>\n\n\n',script:"\n export default {\n data: function() {\n return {\n radio2: 3\n };\n }\n }\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-radio-group",{model:{value:t.radio2,callback:function(s){t.radio2=s},expression:"radio2"}},[s("el-radio",{attrs:{label:3}},[t._v("optionA")]),s("el-radio",{attrs:{label:6}},[t._v("optionB")]),s("el-radio",{attrs:{label:9}},[t._v("optionC")])],1)],1),s("p",[t._v("Combine "),s("code",[t._v("<el-radio-group>")]),t._v(" with "),s("code",[t._v("<el-radio>")]),t._v(" to display a radio group. Bind a variable with "),s("code",[t._v("v-model")]),t._v(" of "),s("code",[t._v("<el-radio-group>")]),t._v(" element and set label value in "),s("code",[t._v("<el-radio>")]),t._v(". It also provides "),s("code",[t._v("change")]),t._v(" event with the current value as its parameter.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-group")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"radio2"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":label")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"3"')]),t._v(">")]),t._v("optionA"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":label")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"6"')]),t._v(">")]),t._v("optionB"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":label")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"9"')]),t._v(">")]),t._v("optionC"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-group")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("radio2")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("3")]),t._v("\n };\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(5),s("p",[t._v("Radio with button styles.")]),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-radio-group v-model="radio3">\n <el-radio-button label="New York"></el-radio-button>\n <el-radio-button label="Washington"></el-radio-button>\n <el-radio-button label="Los Angeles"></el-radio-button>\n <el-radio-button label="Chicago"></el-radio-button>\n</el-radio-group>\n<div style="margin: 15px 0;"></div>\n<el-radio-group v-model="radio4">\n <el-radio-button label="New York"></el-radio-button>\n <el-radio-button label="Washington" :disabled="true"></el-radio-button>\n <el-radio-button label="Los Angeles"></el-radio-button>\n <el-radio-button label="Chicago"></el-radio-button>\n</el-radio-group>\n<div style="margin: 15px 0;"></div>\n<el-radio-group v-model="radio5" :disabled="true">\n <el-radio-button label="New York"></el-radio-button>\n <el-radio-button label="Washington"></el-radio-button>\n <el-radio-button label="Los Angeles"></el-radio-button>\n <el-radio-button label="Chicago"></el-radio-button>\n</el-radio-group>\n\n\n',script:"\n export default {\n data: function() {\n return {\n radio3: 'New York',\n radio4: 'New York',\n radio5: 'New York'\n };\n }\n }\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s("el-radio-group",{model:{value:t.radio3,callback:function(s){t.radio3=s},expression:"radio3"}},[s("el-radio-button",{attrs:{label:"New York"}}),s("el-radio-button",{attrs:{label:"Washington"}}),s("el-radio-button",{attrs:{label:"Los Angeles"}}),s("el-radio-button",{attrs:{label:"Chicago"}})],1),s("div",{staticStyle:{margin:"15px 0"}}),s("el-radio-group",{model:{value:t.radio4,callback:function(s){t.radio4=s},expression:"radio4"}},[s("el-radio-button",{attrs:{label:"New York"}}),s("el-radio-button",{attrs:{label:"Washington",disabled:!0}}),s("el-radio-button",{attrs:{label:"Los Angeles"}}),s("el-radio-button",{attrs:{label:"Chicago"}})],1),s("div",{staticStyle:{margin:"15px 0"}}),s("el-radio-group",{attrs:{disabled:!0},model:{value:t.radio5,callback:function(s){t.radio5=s},expression:"radio5"}},[s("el-radio-button",{attrs:{label:"New York"}}),s("el-radio-button",{attrs:{label:"Washington"}}),s("el-radio-button",{attrs:{label:"Los Angeles"}}),s("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),s("p",[t._v("You just need to change "),s("code",[t._v("<el-radio>")]),t._v(" element into "),s("code",[t._v("<el-radio-button>")]),t._v(" element. We also provide "),s("code",[t._v("size")]),t._v(" attribute for these buttons: "),s("code",[t._v("large")]),t._v(" and "),s("code",[t._v("small")]),t._v(".")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-group")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"radio3"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"New York"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Washington"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Los Angeles"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Chicago"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-button")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-group")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("style")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"margin: 15px 0;"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-group")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"radio4"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"New York"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Washington"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":disabled")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"true"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Los Angeles"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Chicago"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-button")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-group")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("style")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"margin: 15px 0;"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-group")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-model")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"radio5"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v(":disabled")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"true"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"New York"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Washington"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Los Angeles"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-button")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("label")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"Chicago"')]),t._v(">")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-button")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-radio-group")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("radio3")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'New York'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("radio4")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'New York'")]),t._v(",\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("radio5")]),t._v(": "),s("span",{attrs:{class:"hljs-string"}},[t._v("'New York'")]),t._v("\n };\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n")])])])]),t._m(6),t._m(7),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),t._m(13)],1)},n=[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"radio"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"basic-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"disabled"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var s=this.$createElement,s=this._self._c||s;return s("p",[s("code",{pre:!0},[this._v("disabled")]),this._v(" attribute is used to disable the radio.")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"radio-button-group"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio button group")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"button-style"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#button-style","aria-hidden":"true"}},[this._v("¶")]),this._v(" Button style")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"radio-attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#radio-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("label")]),t("td",[s._v("the value of radio")]),t("td",[s._v("string/number/boolean")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("whether radio is disabled")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])]),t("tr",[t("td",[s._v("name")]),t("td",[s._v("native 'name' attribute")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("—")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"radio-group-attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio-group Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("size")]),t("td",[s._v("the size of radio buttons")]),t("td",[s._v("string")]),t("td",[s._v("large/small")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("fill")]),t("td",[s._v("border and background color when button is active")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#20a0ff")])]),t("tr",[t("td",[s._v("text-color")]),t("td",[s._v("font color when button is active")]),t("td",[s._v("string")]),t("td",[s._v("—")]),t("td",[s._v("#ffffff")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"radio-group-events"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio-group Events")])},function(){var s=this.$createElement,s=this._self._c||s;return s("table",{staticClass:"table"},[s("thead",[s("tr",[s("th",[this._v("Event Name")]),s("th",[this._v("Description")]),s("th",[this._v("Parameters")])])]),s("tbody",[s("tr",[s("td",[this._v("change")]),s("td",[this._v("triggers when the bound value changes")]),s("td",[this._v("the label value of the chosen radio")])])])])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"radio-button-attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio-button Attributes")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",[s._v("Attribute")]),t("th",[s._v("Description")]),t("th",[s._v("Type")]),t("th",[s._v("Accepted Values")]),t("th",[s._v("Default")])])]),t("tbody",[t("tr",[t("td",[s._v("label")]),t("td",[s._v("the value of radio")]),t("td",[s._v("string/number")]),t("td",[s._v("—")]),t("td",[s._v("—")])]),t("tr",[t("td",[s._v("disabled")]),t("td",[s._v("whether radio is disabled")]),t("td",[s._v("boolean")]),t("td",[s._v("—")]),t("td",[s._v("false")])])])])}]},927:function(s,t,a){"use strict";a.d(t,"a",function(){return l}),a.d(t,"b",function(){return n});var l=function(){var t=this,s=t.$createElement,s=t._self._c||s;return s("section",[t._m(0),t._m(1),t._m(2),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div>\n <el-button @click="show = !show">Click Me</el-button>\n\n <div style="display: flex; margin-top: 20px; height: 100px;">\n <transition name="el-fade-in-linear">\n <div v-show="show" class="transition-box">.el-fade-in-linear</div>\n </transition>\n <transition name="el-fade-in">\n <div v-show="show" class="transition-box">.el-fade-in</div>\n </transition>\n </div>\n </div>\n</template>\n\n\n\n\n',script:"\n export default {\n data: function() {\n return {\n show: true\n }\n }\n }\n",style:"\n .transition-box {\n margin-bottom: 10px;\n width: 200px;\n height: 100px;\n border-radius: 4px;\n background-color: #20A0FF;\n text-align: center;\n color: #fff;\n padding: 40px 20px;\n box-sizing: border-box;\n margin-right: 20px;\n }\n"}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[s("div",[s("el-button",{on:{click:function(s){t.show=!t.show}}},[t._v("Click Me")]),s("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[s("transition",{attrs:{name:"el-fade-in-linear"}},[s("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"transition-box"},[t._v(".el-fade-in-linear")])]),s("transition",{attrs:{name:"el-fade-in"}},[s("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"transition-box"},[t._v(".el-fade-in")])])],1)],1)]],2),s("p",[t._v("We have two fading effects: "),s("code",[t._v("el-fade-in-linear")]),t._v(" and "),s("code",[t._v("el-fade-in")]),t._v(".")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@click")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"show = !show"')]),t._v(">")]),t._v("Click Me"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("style")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"display: flex; margin-top: 20px; height: 100px;"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("transition")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"el-fade-in-linear"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-show")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"show"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"transition-box"')]),t._v(">")]),t._v(".el-fade-in-linear"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("transition")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("transition")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"el-fade-in"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-show")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"show"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"transition-box"')]),t._v(">")]),t._v(".el-fade-in"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("transition")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("show")]),t._v(": "),s("span",{attrs:{class:"hljs-literal"}},[t._v("true")]),t._v("\n }\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("style")]),t._v(">")]),s("span",{attrs:{class:"css"}},[t._v("\n "),s("span",{attrs:{class:"hljs-selector-class"}},[t._v(".transition-box")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("margin-bottom")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("10px")]),t._v(";\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("width")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("200px")]),t._v(";\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("height")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("100px")]),t._v(";\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("border-radius")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("4px")]),t._v(";\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("background-color")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("#20A0FF")]),t._v(";\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("text-align")]),t._v(": center;\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("color")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("#fff")]),t._v(";\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("padding")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("40px")]),t._v(" "),s("span",{attrs:{class:"hljs-number"}},[t._v("20px")]),t._v(";\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("box-sizing")]),t._v(": border-box;\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("margin-right")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("20px")]),t._v(";\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("style")]),t._v(">")]),t._v("\n")])])])]),t._m(3),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div>\n <el-button @click="show2 = !show2">Click Me</el-button>\n\n <div style="display: flex; margin-top: 20px; height: 100px;">\n <transition name="el-zoom-in-center">\n <div v-show="show2" class="transition-box">.el-zoom-in-center</div>\n </transition>\n\n <transition name="el-zoom-in-top">\n <div v-show="show2" class="transition-box">.el-zoom-in-top</div>\n </transition>\n\n <transition name="el-zoom-in-bottom">\n <div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>\n </transition>\n </div>\n </div>\n</template>\n\n\n\n\n',script:"\n export default {\n data: function() {\n return {\n show2: true\n }\n }\n }\n",style:"\n .transition-box {\n margin-bottom: 10px;\n width: 200px;\n height: 100px;\n border-radius: 4px;\n background-color: #20A0FF;\n text-align: center;\n color: #fff;\n padding: 40px 20px;\n box-sizing: border-box;\n margin-right: 20px;\n }\n"}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[s("div",[s("el-button",{on:{click:function(s){t.show2=!t.show2}}},[t._v("Click Me")]),s("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[s("transition",{attrs:{name:"el-zoom-in-center"}},[s("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-center")])]),s("transition",{attrs:{name:"el-zoom-in-top"}},[s("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-top")])]),s("transition",{attrs:{name:"el-zoom-in-bottom"}},[s("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-bottom")])])],1)],1)]],2),s("p",[s("code",[t._v("el-zoom-in-center")]),t._v(", "),s("code",[t._v("el-zoom-in-top")]),t._v(" and "),s("code",[t._v("el-zoom-in-bottom")]),t._v(" are provided.")]),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@click")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"show2 = !show2"')]),t._v(">")]),t._v("Click Me"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("style")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"display: flex; margin-top: 20px; height: 100px;"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("transition")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"el-zoom-in-center"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-show")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"show2"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"transition-box"')]),t._v(">")]),t._v(".el-zoom-in-center"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("transition")]),t._v(">")]),t._v("\n\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("transition")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"el-zoom-in-top"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-show")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"show2"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"transition-box"')]),t._v(">")]),t._v(".el-zoom-in-top"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("transition")]),t._v(">")]),t._v("\n\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("transition")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("name")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"el-zoom-in-bottom"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-show")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"show2"')]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"transition-box"')]),t._v(">")]),t._v(".el-zoom-in-bottom"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("transition")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("show2")]),t._v(": "),s("span",{attrs:{class:"hljs-literal"}},[t._v("true")]),t._v("\n }\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("style")]),t._v(">")]),s("span",{attrs:{class:"css"}},[t._v("\n "),s("span",{attrs:{class:"hljs-selector-class"}},[t._v(".transition-box")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("margin-bottom")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("10px")]),t._v(";\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("width")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("200px")]),t._v(";\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("height")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("100px")]),t._v(";\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("border-radius")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("4px")]),t._v(";\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("background-color")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("#20A0FF")]),t._v(";\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("text-align")]),t._v(": center;\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("color")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("#fff")]),t._v(";\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("padding")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("40px")]),t._v(" "),s("span",{attrs:{class:"hljs-number"}},[t._v("20px")]),t._v(";\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("box-sizing")]),t._v(": border-box;\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("margin-right")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("20px")]),t._v(";\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("style")]),t._v(">")]),t._v("\n")])])])]),t._m(4),t._m(5),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div>\n <el-button @click="show3 = !show3">Click Me</el-button>\n\n <div style="margin-top: 20px; height: 200px;">\n <el-collapse-transition>\n <div v-show="show3">\n <div class="transition-box">el-collapse-transition</div>\n <div class="transition-box">el-collapse-transition</div>\n </div>\n </el-collapse-transition>\n </div>\n </div>\n</template>\n\n\n\n\n',script:"\n export default {\n data: function() {\n return {\n show3: true\n }\n }\n }\n",style:"\n .transition-box {\n margin-bottom: 10px;\n width: 200px;\n height: 100px;\n border-radius: 4px;\n background-color: #20A0FF;\n text-align: center;\n color: #fff;\n padding: 40px 20px;\n box-sizing: border-box;\n margin-right: 20px;\n }\n"}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[s("div",[s("el-button",{on:{click:function(s){t.show3=!t.show3}}},[t._v("Click Me")]),s("div",{staticStyle:{"margin-top":"20px",height:"200px"}},[s("el-collapse-transition",[s("div",{directives:[{name:"show",rawName:"v-show",value:t.show3,expression:"show3"}]},[s("div",{staticClass:"transition-box"},[t._v("el-collapse-transition")]),s("div",{staticClass:"transition-box"},[t._v("el-collapse-transition")])])])],1)],1)]],2),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("pre",{pre:!0},[s("code",{attrs:{class:"hljs language-html"}},[s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("@click")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"show3 = !show3"')]),t._v(">")]),t._v("Click Me"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-button")]),t._v(">")]),t._v("\n\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("style")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"margin-top: 20px; height: 200px;"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-collapse-transition")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("v-show")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"show3"')]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"transition-box"')]),t._v(">")]),t._v("el-collapse-transition"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(" "),s("span",{attrs:{class:"hljs-attr"}},[t._v("class")]),t._v("="),s("span",{attrs:{class:"hljs-string"}},[t._v('"transition-box"')]),t._v(">")]),t._v("el-collapse-transition"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("el-collapse-transition")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("template")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),s("span",{attrs:{class:"javascript"}},[t._v("\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("export")]),t._v(" "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("default")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("data")]),t._v(": "),s("span",{attrs:{class:"hljs-function"}},[s("span",{attrs:{class:"hljs-keyword"}},[t._v("function")]),t._v("("),s("span",{attrs:{class:"hljs-params"}}),t._v(") ")]),t._v("{\n "),s("span",{attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attr"}},[t._v("show3")]),t._v(": "),s("span",{attrs:{class:"hljs-literal"}},[t._v("true")]),t._v("\n }\n }\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("script")]),t._v(">")]),t._v("\n\n"),s("span",{attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{attrs:{class:"hljs-name"}},[t._v("style")]),t._v(">")]),s("span",{attrs:{class:"css"}},[t._v("\n "),s("span",{attrs:{class:"hljs-selector-class"}},[t._v(".transition-box")]),t._v(" {\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("margin-bottom")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("10px")]),t._v(";\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("width")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("200px")]),t._v(";\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("height")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("100px")]),t._v(";\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("border-radius")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("4px")]),t._v(";\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("background-color")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("#20A0FF")]),t._v(";\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("text-align")]),t._v(": center;\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("color")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("#fff")]),t._v(";\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("padding")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("40px")]),t._v(" "),s("span",{attrs:{class:"hljs-number"}},[t._v("20px")]),t._v(";\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("box-sizing")]),t._v(": border-box;\n "),s("span",{attrs:{class:"hljs-attribute"}},[t._v("margin-right")]),t._v(": "),s("span",{attrs:{class:"hljs-number"}},[t._v("20px")]),t._v(";\n }\n")]),s("span",{attrs:{class:"hljs-tag"}},[t._v("</"),s("span",{attrs:{class:"hljs-name"}},[t._v("style")]),t._v(">")]),t._v("\n")])])])]),t._m(6),t._m(7)],1)},n=[function(){var s=this.$createElement,s=this._self._c||s;return s("h2",{attrs:{id:"built-in-transition"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#built-in-transition","aria-hidden":"true"}},[this._v("¶")]),this._v(" Built-in transition")])},function(){var s=this.$createElement,s=this._self._c||s;return s("p",[this._v("You can use YufpWP's built-in transitions directly. Before that, please read the "),s("a",{attrs:{href:"https://vuejs.org/v2/api/#transition"}},[this._v("transition docs")]),this._v(".")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"fade"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#fade","aria-hidden":"true"}},[this._v("¶")]),this._v(" fade")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"zoom"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#zoom","aria-hidden":"true"}},[this._v("¶")]),this._v(" zoom")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"collapse"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" collapse")])},function(){var s=this.$createElement,s=this._self._c||s;return s("p",[this._v("For collapse effect, use the "),s("code",{pre:!0},[this._v("el-collapse-transition")]),this._v(" component.")])},function(){var s=this.$createElement,s=this._self._c||s;return s("h3",{attrs:{id:"on-demand"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#on-demand","aria-hidden":"true"}},[this._v("¶")]),this._v(" On demand")])},function(){var s=this,t=s.$createElement,t=s._self._c||t;return t("pre",{pre:!0},[t("code",{attrs:{class:"hljs language-js"}},[t("span",{attrs:{class:"hljs-comment"}},[s._v("// fade/zoom")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'yuwp-ui/lib/theme-defaut/base.css'")]),s._v(";\n"),t("span",{attrs:{class:"hljs-comment"}},[s._v("// collapse")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" CollapseTransition "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'yuwp-ui/lib/transitions/collapse-transition'")]),s._v(";\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n\nVue.component(CollapseTransition.name, CollapseTransition)\n")])])}]}}]);
|